html整体图片拆分拼图代码源代码,canvas拼图功能实现代码示例

最近做项目的时候遇到照片拼图的功能，便在这里分享自己的封装的canvas拼图功能，可能代码写的不好，如果有疑问或者是有更好的方法的，可以私聊我，或者是评论指出，感谢各位

实现的思路其实挺简单的，主要是通过服务端获取图片链接，图片宽度，图片高度，然后利用简单的递归实现就行了(注意移动端需要采用2倍数的比例，否则会出现图片模糊的问题)

/**

* canvas绘图数据

* @param {Object[]} option.photoData

* @param {string} option.photoData[].photo - 照片的链接地址

* @param {number} option.photoData[].width - 照片的宽度

* @param {number} option.photoData[].height - 照片的高度

* @param {Object[]} option.wordData

* @param {string} option.wordData[].color - 文字的颜色

* @param {number} option.wordData[].fontSize - 文字的大小

* @param {string} option.wordData[].fontWeight - 文字的粗细

* @param {number} option.wordData[].left - 文字的左边距

* @param {number} option.wordData[].top - 文字的上边距

* @param {string} option.wordData[].word - 文字的内容

* @param {Object[]} option.iconData

* @param {string} option.iconData[].photo - icon的链接地址

* @param {number} option.iconData[].left - icon的左边距

* @param {number} option.iconData[].top - icon的上边距

* @param {number} option.iconData[].width - icon的宽度

* @param {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, 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 + ' ' + calculate(item.fontSize) + 'px Microsoft YaHei';

ctx.textAlign = 'left';

ctx.fillText(item.word, calculate(item.left), canvasHeight + calculate(item.top));

})

}

//按比例计算不同手机的百分比间距

function calculate(num){

return Math.floor(clientWidth * num / 750)

}

drawPhoto('photo0')

function drawPhoto(photoDom){

var photoDom = new Image();

photoDom.setAttribute('crossOrigin', 'Anonymous');

photoDom.src = option.photoData[photoCount].photo;

photoDom.onload = function(){

ctx.drawImage(photoDom, 0, 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, calculate(option.iconData[iconCount].left), canvasHeight + calculate(option.iconData[iconCount].top), calculate(option.iconData[iconCount].width), calculate(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')

}

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。