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
最后留下了感动的眼泪