微信小程序canvas画布绘制；canvas画布图片保存

微信小程序canvas画布绘制

wx.createSelectorQuery()

.select('#canvas')

.fields({ node:  true, size:  true  })

.exec(res  =>  {

let  ctx  =  res[0].node.getContext('2d');//getContext返回Canvas 的绘图上下文

let  canvas  =  res[0].node;

img=canvas;

console.log(img);

// 通过设备的像素比等重新绘制宽高

const  dpr  =  wx.getSystemInfoSync().pixelRatio

canvas.width  =  500  *  dpr

canvas.height  =  900  *  dpr

ctx.scale(dpr,  dpr)

console.log(res[0].width  *  dpr);

console.log(res[0].height  *  dpr);


let  image  =  canvas.createImage();//创建iamge实例

image.src  =  'https://xxxxxxxxx';

image.onload  =  function  (rrr)  {

ctx.drawImage(image,  0,  40,  500,  820);
}
let  image1  =  canvas.createImage();//创建iamge实例

image1.src  =  'https://xxxxxxxx';

image1.onload  =  function  (rrr)  {

ctx.drawImage(image1,  110,  435,  290,  290);

}

})

wx.createSelectorQuery().select('#canvas').boundingClientRect(function(res)  {

console.log(res);

}).exec();

微信小程序 canvas画布图片保存

wx.canvasToTempFilePath({

// 把画布转化成临时文件

x:  0,

y:  0,

width:  500,  // 截取的画布的宽

height:  900,  // 截取的画布的高

destWidth:  500,  // 保存成的画布宽度

destHeight:  900,  // 保存成的画布高度

fileType:  'jpg',  // 保存成的文件类型

quality:  1,  // 图片质量

canvas:img,  // 画布ID

success(res)  {

console.log(res.tempFilePath)

// 2-保存图片至相册

wx.saveImageToPhotosAlbum({

// 存成图片至手机

filePath:  res.tempFilePath,

success(res2)  {

wx.showToast({

title:  '保存成功',

duration:  2000

});

},

fail(res3)  {

if (res3.errMsg  ===  'saveImageToPhotosAlbum:fail auth deny') {

wx.showToast({

title:  '保存失败，稍后再试',

duration:  2000,

icon:  'none'

});

}  else  {

wx.showToast({

title:  '保存失败，稍后再试',

duration:  2000,

icon:  'none'

});

}

}

});

},

fail(error)  {

console.log(error);

wx.showToast({

title:  '保存失败，稍后再试',

duration:  2000,

icon:  'none'

});

}

});