canvas生成水印图,并且存图分享
h5存图分享
css属性可用于存图分享:-webkit-touch-callout:default; html: <canvas id="myCanvas" style="display:none;"> Your browser does not support the HTML5 canvas tag. </canvas> <img src="" id="imga"> var img,//图片对象 imgIsLoaded,//图片是否加载完成; imgX = 0, imgY = 0; (function int() { canvas = document.getElementById('myCanvas'); //画布对象 canvas.width = screen.width; canvas.height = screen.height; context = canvas.getContext('2d');//画布显示二维图片 loadImg(); })(); function loadImg() { img = new Image(); img.onload = function () { imgIsLoaded = true; drawImage(); } img.src = './images/shareImg.png'; } function drawImage() { context.clearRect(0, 0, canvas.width, canvas.height); var imgWidth = canvas.width; var imgHeight = (canvas.width*img.height)/img.width; context.drawImage( img, //规定要使用的图像、画布或视频。 0, 0, //开始剪切的 x 坐标位置。 img.width, img.height, //被剪切图像的高度。 imgX, imgY,//在画布上放置图像的 x 、y坐标位置。 imgWidth,imgHeight //要使用的图像的宽度、高度 ); context.fillStyle = "#fbba15"; context.font = "35px microsoft yahei"; context.fillText(level*level,255,210); context.fillText(score+"秒",164,280); //注意跨域问题 $("#imga").attr('src',canvas.toDataURL()) }
微信存图:
wxml: <button id="saveImg" style="background: #fe6659;" bindtap='createNewImg'>存图分享</button> <canvas canvas-id='canvasimg' style='height:1336px;'></canvas> wxss: canvas{position: absolute;top: 0px;left: -1000px;width: 754px;} js: createNewImg: function () { var that = this; wx.showToast({ title: '分享图片生成中...', icon: 'loading', mark: false, duration: 1000 }); var numLeft = 485; var bgWidth = that.data.bgWidth; var winHeight = that.data.winHeight; var level = that.data.level; var score = that.data.score; if (level == 3) { numLeft = 510; } var ctx = wx.createCanvasContext('canvasimg', that); ctx.drawImage('../../../../pic/shareImg.png', 0, 0, 754, 1336); ctx.setFontSize(70); ctx.setFillStyle("#fbba15"); ctx.fillText(level * level, numLeft, 420); ctx.setFontSize(60); ctx.fillText(score + "秒", 325, 560); ctx.draw(false, function () { wx.canvasToTempFilePath({ canvasId: 'canvasimg', success: function (res) { var tempFilePath = res.tempFilePath; wx.previewImage({ current: tempFilePath, urls: [tempFilePath] }) wx.hideToast(); } , fail: function (res) { console.log('ERROR'); console.log(res); } }); }); },