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);
}
});
});
},