小程序canvas裁剪、合成图片最后修改图片dpi

1.we-cropper（小程序图片裁剪工具）

引入这三个文件，我建议是用canvas2d。

用canvas2d就需要修改下we-cropper.wxml

canavas-id改成id，再加上type="2d"

在方法里加上这仨，恭喜你可以裁剪了，放大缩小、上下左右走位。

效果图就直接拿官网的来凑数好了

当然你不喜欢裁剪区四个角的东西可以去掉，简单粗暴的我就操作了

接下就是合成图了

    const query = wx.createSelectorQuery()
    query.select('#myCanvas')
      .fields({
        node: true,
        size: true
      })
      .exec((res) => {
        const canvas = res[0].node
        const ctx = canvas.getContext('2d')
        let img = canvas.createImage();
        img.src = '裁剪出来的图片';
        img.onload = () => {
          ctx.drawImage(img, x, y, w, h);
        }                     //x,y,w,h这四个难道还我解释吗

        const dpr = wx.getSystemInfoSync().pixelRatio
        canvas.width = res[0].width * dpr 
        canvas.height = res[0].height * dpr 
        ctx.scale(dpr , dpr )
        ctx.fillStyle = "#ffffff";//我这里是白底 如果你遇到要五彩斑斓的黑那种客户 你可以在这改
        ctx.fillRect(0, 0, 宽, 高)
      })
      
          
        // wx.canvasToTempFilePath({
        //   canvas: canvas, // 使用2D 需要传递的参数这里 canvas就是上面的res[0].node
        //   success(res) {
        //     console.log(res.tempFilePath)这就是你要是合成图临时路径了

        //   }
        // })
复制代码

到这里canvas裁剪、合成图片已经完成了！！！

后续。。。。

客户说了我要254分辨率的

合成图片的dpi只有96dpi 丢到切图仔的工具72ppi dpi/ppi反正就是分辨率

秃头工作啊啊啊啊啊啊啊，这时候只能百度了。满天神佛来来去去www.cnblogs.com/xiarugu/p/c… 感谢这大哥提供了思路......

走投无路的前端仔柳暗花明又一春changeDPI，这里面用到解码编码base-64 atob() btoa() 为什么用到上面那位大哥已经告诉我了，问题来了小程序不支持atob、btoa，又一次走投无路，留下没有技术的眼泪。柳暗花明再一春 weapp-jwt啥也不说了 changeDPI.js文件引入引入引入import { weBtoa, weAtob } from './weapp-jwt.js'

替换掉atob、btoa

最后留下了感动的眼泪

小程序canvas裁剪、合成图片 最后修改图片dpi

小程序canvas裁剪、合成图片最后修改图片dpi