绘制图片到canvas上

html代码

<canvas id="myCanvas" wx:if="canvasShow"  style="width: 375px; height: 904px;" type="2d" ></canvas>

const query = wx.createSelectorQuery()query.select('#myCanvas')
.fields({ node: true, size: true })
.exec((res) => {const canvas = res[0].node;const dpr = wx.getSystemInfoSync().pixelRatio;canvas.width = res[0].width * dprcanvas.height = res[0].height * dprconst ctx = canvas.getContext('2d')ctx.scale(dpr, dpr)//canvas.createImage()在微信版本7.0.20会有报错，进入不了onload。 但是在7.0.21已经修复。let pic = canvas.createImage();ctx.fillRect(0, 0, 100, 100)pic.src = self.data.imgsrc; //可以是本地，也可以是网络图片console.log(pic)pic.onload = () => {//不要用官方示例的图片路径，包括网上在这之前所有的文档/示例里是地址链接的都不要看了，要用image对象！ctx.drawImage(pic,0, 0, 150, 150);}
}

把绘制完的canvas导出

wx.canvasToTempFilePath({ //将canvas生成图片//这里写canvas为获取或者创建的canvas对象 不要按照文档里写canvasId ，否则会有fail canvas is empty 的报错canvas:canvas, x: 0, y: 0,width: self.data.imageWidth, //自己定义canvas的宽度height: self.data.imageHeight, //自己定义canvas的高度destWidth: self.data.imageWidth, //截取canvas的宽度destHeight: self.data.imageHeight, //截取canvas的高度success: function (res) {console.log(res)wx.saveImageToPhotosAlbum({  //保存图片到相册filePath: this.data.savePic,success: function () {wx.showToast({title: "生成图片成功！",duration: 2000})}})},fail:function(res){console.log(res)    }
})

微信小程序绘制图片到canvas上并保存图片相关推荐

微信小程序在一张canvas上把正方形图片绘制成圆形
因为最近在做分享功能,需要用户的头像在微信小程序中,然后写下其他文字,如何在把正方形图片放到canvas,导成圆角.找了两个参考资料,分别是用.clip()和.clearRect()两种方法微信小程 ...
uniapp 微信小程序开发图片上传压缩
uniapp 微信小程序开发图片上传压缩安卓上传图片并压缩思路全部代码安卓上传图片并压缩由于后端接口对图片的大小有限制,所以在上传图片是需要压缩处理: uni.chooseImage({c ...
微信小程序实现图片是上传、预览功能
本文实例讲述了微信小程序实现图片上传.删除和预览功能的方法,分享给大家供大家参考,具体如下: 这里主要介绍一下微信小程序的图片上传图片删除和图片预览 1.可以调用相机也可以从本地相册选择 2.本地实现 ...
php微信小程序多图上传,tp5实现微信小程序多图片上传到服务器功能
最近在做一个教育类的小商城的微信小程序,用到了上传多个图片文件到服务器端,这里做一个讲解,希望对大家有所帮助. 1,小程序端: 在wxml文件中: 删除点击上传作业在js文件中: Page({ / ...
微信小程序云开发如何实现上传视频以及图片
微信小程序云开发如何实现上传视频以及图片最基础的数据库增删改查,上传到云存储即可实现,附源码 wxml文件 <button bindtap="upload">上传 ...
微信小程序绘制分享图
微信小程序绘制分享图例子: demo下载地址:https://gitee.com/v-Xie/wxCanvasShar 大致代码会再以下说明实际开发项目: 基础知识点: 了解canvas基础知识 w ...
微信小程序操作图片放大、缩小、旋转、拖拽
微信小程序操作图片放大.缩小.旋转.拖拽在开发小程序的时候遇到了上传图片,然后编辑的需求.打算网上找一下相关代码组件的,就不用自己搞这么麻烦.经过一番折腾,还是没有找到如意的,最后自己弄好了,记录一 ...
微信小程序裁剪图片成圆形
代码地址如下: http://www.demodashi.com/demo/14453.html 前言最近在开发小程序,产品经理提了一个需求,要求微信小程序换头像,用户剪裁图片必须是圆形,也在git ...
微信小程序绘制海报，或者把多张图片合成一张
微信小程序绘制海报,或者把多张图片合成一张,例子 <image style='height:{{mabgh}}px;width:{{mabgw}}px;' class="savepng ...

微信小程序绘制图片到canvas上并保存图片

绘制图片到canvas上并保存图片

绘制图片到canvas上

把绘制完的canvas导出

微信小程序绘制图片到canvas上并保存图片相关推荐

最新文章

热门文章