最近做项目的时候遇到照片拼图的
功能,便
在这里分享自己的封装的canvas拼图
功能,可能
代码写的不好,如果有疑问或者是有更好的
方法的,可以私聊我,或者是
评论指出,感谢各位
实现的思路其实挺简单的,主要是通过服务端
获取图片链接,
图片宽度,
图片高度,然后利用简单的递归实现就行了(注意移动端需要采用2倍数的比例,否则会出现
图片模糊的问题)
/**
* canvas绘图数据
* @p
aram {Object[]} option.photoData
* @p
aram {string} option.photoData[].photo - 照片的
链接地址
* @p
aram {number} option.photoData[].width - 照片的宽度
* @p
aram {number} option.photoData[].height - 照片的高度
* @p
aram {Object[]} option.wordData
* @p
aram {string} option.wordData[].color -
文字的颜色
* @p
aram {number} option.wordData[].fontSize -
文字的大小
* @p
aram {string} option.wordData[].fontWeight -
文字的粗细
* @p
aram {number} option.wordData[].left -
文字的左边距
* @p
aram {number} option.wordData[].top -
文字的上边距
* @p
aram {string} option.wordData[].word -
文字的
内容
* @p
aram {Object[]} option.iconData
* @p
aram {string} option.iconData[].photo - icon的
链接地址
* @p
aram {number} option.iconData[].left - icon的左边距
* @p
aram {number} option.iconData[].top - icon的上边距
* @p
aram {number} option.iconData[].width - icon的宽度
* @p
aram {number} option.iconData[].height - icon的高度
*
*/
function canvasDraw(option){
var canvas = document.createElement('canvas'),ctx = canvas.getContext('2d'),clientWidth = document.documentElement.clientWidth,canvasHeight = 0,
distance = 0,photoCount = 0,iconCount = 0;
// canvas中手机上一倍绘图会模糊,需采用两倍,pc端不会。
clientWidth = clientWidth > 480? 480 * 2 : clientWidth * 2;
option.photoData.forEach(function(item,index,picArr){
if (!index) {
item.
distance = 0;
}else if(index){
distance += Math.floor(clientWidth / option.photoData[index - 1].width * option.photoData[index - 1].height)
item.
distance =
distance;
}
canvasHeight += Math.floor(clientWidth / item.width * item.height);
item.imgHeight = Math.floor(clientWidth / item.width * item.height);
})
console.log(option.photoData)
if (ctx) {
canvas.width = clientWidth;
canvas.height = canvasHeight + clientWidth / 4 * 2
ctx.fillStyle = '#fff'
ctx.fillRect(0,canvas.width,canvas.height)
// 绘制
图片文字
if(option.wordData.length){
option.wordData.forEach(function(item,index){
ctx.fillStyle = item.color;
ctx.font = '
normal
normal ' + item.fontWeight + ' ' + cal
culate(item.fontSize) + 'px Microsoft YaHei';
ctx.textAlign = 'left';
ctx.fillText(item.word,cal
culate(item.left),canvasHeight + cal
culate(item.top));
})
}
//
按比例计算不同手机的百分比间距
function cal
culate(num){
return Math.floor(clientWidth * num / 750)
}
drawPhoto('photo0')
function drawPhoto(phot
odom){
var phot
odom = new Image();
phot
odom.setAttribute('crossOrigin','Anonymous');
phot
odom.src = option.photoData[photoCount].photo;
phot
odom.onload = function(){
ctx.drawImage(phot
odom,option.photoData[photoCount].
distance,clientWidth,option.photoData[photoCount].imgHeight);
photoCount++;
if (photoCount == option.photoData.length) {
drawIcon('icon0')
function drawIcon(iconDom){
var iconDom = new Image();
iconDom.setAttribute('crossOrigin','Anonymous');
iconDom.src = option.iconData[iconCount].icon;
iconDom.onload = function(){
ctx.drawImage(iconDom,cal
culate(option.iconData[iconCount].left),canvasHeight + cal
culate(option.iconData[iconCount].top),cal
culate(option.iconData[iconCount].width),cal
culate(option.iconData[iconCount].height))
iconCount++;
if (iconCount == option.iconData.length) {
var imageURL = canvas.toDataURL("image/jpeg")
document.getElementsByClassName('shareImg')[0].setAttribute('src',imageURL)
//将闭包引用清除,释放内存;
drawPhoto = null;
}else{
drawIcon('icon' + iconCount)
}
}
}
}else{
drawPhoto('photo'+ photoCount)
}
}
}
}else{
console.log('
不支持canvas')
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。