小程序canvas商品海报绘制

前端—新人

已于 2022-06-29 15:13:18 修改

阅读量244

点赞数

分类专栏：小程序 laravel 文章标签：小程序 canvas

于 2020-06-10 14:37:11 首次发布

本文链接：https://blog.csdn.net/zhang_guom/article/details/106665211

版权

小程序canvas海报绘制

1.html

绘制图片的元素
<view class="canvas-box">
	<canvas  style="width: 300px;height: 440px;position:fixed;" canvas-id="mycanvas"/>
</view> 

展示海报的元素
<view class="canvas_img" wx:if="{
  {sanvas_img_show}}">
	<view bindtap="none_post" style="float:right;color:#ccc; font-size:30rpx;margin:20rpx 30rpx 0 0">取消</view>
<view class='imagePathBox'>
  <image src="{
  {imagePath}}" class='shengcheng'></image>
</view>
	<button class='baocun' bindtap='baocun'>保存相册，分享到朋友圈		  </button>
</view>

2.js

//生成海报
1、获取二维码
 make_post(){
	var that = this;
	//获取商品二维码
	 wx.request({
  		url: api_url + 'goods/creat_code',
 		method: 'POST',
  		header: app.data.header,
	      data: {
	        uuid:app.data.uuid,
	        goods_id: that.data.goods_info.goods_id
	      },
	      success (res) {
	        var code_img = res.data.data;
	        console.log(code_img);
	        setTimeout(function () {
	          that.createNewImg(code_img);
	        }, 1000) 
	      }
	    })
	 },
2、把图片保存到本地零时文件	
createNewImg: function (code_img) {
  var code_img = code_