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')
}
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
html整体图片拆分拼图代码源代码,canvas拼图功能实现代码示例相关推荐
- Python用20行代码实现完整邮件功能 [完整代码+建议收藏]
大家好,我是Lex 喜欢欺负超人那个Lex 擅长领域:python开发.网络安全渗透.Windows域控Exchange架构 今日重点:python脚本实现发送邮件,邮件添加附件,读取接收邮件等功能. ...
- 百度自动推送html5,百度暂停 JS 代码自动推送功能,代码是否需要删除?
本月上旬末的时候百度站长平台就推送了一则关于:搜索资源平台自动推送暂停使用通知.说到由于升级维护,搜索资源平台链接提交-自动提交-自动推送(JS 代码推送)功能暂时停止使用.并且会在恢复使用时再次通知 ...
- Spyder 代码自动补全功能,代码提示
- 如何用HTML语言设计进度条,html5代码如何实现进度条功能?(示例)
本篇文章主要介绍html5代码如何实现进度条功能,希望对大家有所帮助. html5代码实现进度条功能具体代码示例如下:/*实现进度条的功能*/ 下载进度: /*js代码*/ var pg=docume ...
- Python拼图游戏源代码,可定制拼图图片,支持多种难度,可九宫格、十六宫格、二十五宫格
配置环境 安装pygame模块 pip install pygame 引入资源 将照片,添加到resources/pictures路径下 照片.jpg格式 主函数代码 pintu.py 一个配置文件c ...
- html制作图片动画效果代码,HTML5 Canvas:制作动画特效
编辑推荐: 本文来自于jquery之家 ,html5制作canvas动画的基本步骤,控制canvas动画和实例代码. 要在 HTML5 canvas 中绘制图像动画效果,你需要绘制出每一帧的图像,然后 ...
- html5图片灰度显示,HTML5 组件Canvas实现图像灰度化
HTML5发布已经有很长一段时间了,一直以来从来没有仔细的看过,过年刚来随便看看 发现HTML5中的Canvas组件功能是如此的强大,不怪很多牛人预言Flash已死,死不死 不是我要关心的,我关心的C ...
- IE下及标准浏览器下的图片旋转(二)—— Canvas(1)
文章过长,一篇无法保存. IE下及标准浏览器下的图片旋转(一)--滤镜,CSS3 3. canvas canvas 是html5中的新标签,使用canvas之前我们先看下它的定义:<canvas ...
- html页面转换成图片的三种方法——canvas、dom-to-image、html2canvas
html页面转换成图片的三种方法--canvas.dom-to-image.html2canvas canvas绘制网络图片报错(跨域) 使用canvas将html页面转成图片 dom-to-imag ...
最新文章
- 工程介绍好处费性质_水运工程造价工程师继续教育课件上新丨海外水运工程造价编制介绍课程发布...
- 25亿布局大湾区,创新工场的AI下一站
- easyui 中combogrid 实现多选,反选效果
- Attempting to deserialize object on a CUDA device but torch.cuda.is_available() is False
- mft按钮设计_奥林巴斯M4/3系统新品激情再燃 以轻量化设计铸就微单极致体验
- HTML5 localStorage本地存储
- Android Studio apk 打包流程
- PHP 判断用户语言跳转网页
- python的多线程应用前景_什么是线程(多线程),Python多线程的好处
- dsp对音响提升大吗_原车音响太差?!想要升级却不知道买什么品牌好?我来告诉您!...
- github客户端的使用方法教程
- 复合函数高阶求导公式_常用复合函数的导数公式大学微积分常用的复合函数导数,不要推理过程只要导数公式,上课的时候老师是讲了四个,...
- 由于找不到iutils.dll无法继续执行代码?
- 漫画:什么是架构师?
- 数据增强:YoloV4当中的Mosaic数据增强方法
- python绘制小提琴图_seaborn画小提琴图(violin plot)
- 用数字万用表精确测量小电阻
- vue项目如何打包部署到后端
- 在C++中 :: 的三种意思
- Hydra教程——非常详细
热门文章
- 笨笨图片批量抓取下载 V0.2 beta[C# | WinForm | 正则表达式 | HttpWebRequest | Async异步编程]...
- 转一篇Java基础的文章,比较有深度的,就转来收藏了
- [记录] 基于STC89C52RC的贪吃蛇三色游戏机设计(内含点阵驱动、数码管驱动详解)
- numpy.arctan, math.atan, math.atan2的区别
- eval()与train()(结合源码理解)
- linux rs,Linux中的RS, ORS, FS, OFS
- 我努力了十年,才让我的老婆不上班
- 微信直接打开公众号页面 公众号uin_base64直接获取(不用管理员账号 直接获取)
- 聚合数据左磊:不走寻常路 做国内最好的数据聚合平台
- ATEN CS22DP 2端口USB DisplayPort带线式KVM多电脑切换器 (外接式切换按键)