JavaScript canvas实现九宫格切图效果
本文实例为大家分享了canvas实现九宫格切图效果的具体代码，供大家参考，具体内容如下
首先页面展示
直接上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
text-align: center;
}
canvas {
border: 1px solid;
}
.newcanvas {
width: 316px;
height: 316px;
margin: auto;
}
.newpohoto,
.download {
width: 300px;
height: 40px;
line-height: 40px;
margin: auto;
background-color: cornflowerblue;
border-radius: 5px;
cursor: pointer;
margin: 10px auto;
color: white;
}
</style>
</head>
<body>
<h3>使用canvas实现九宫格切图的效果</h3>
<div class="mycanvas">
<canvas width="300" height="300" id="mycnavas"></canvas>
</div>
<div class="newpohoto">
开始切图
</div>
<div class="newcanvas">
<canvas width="100" height="100" id="img1"></canvas>
<canvas width="100" height="100" id="img2"></canvas>
<canvas width="100" height="100" id="img3"></canvas>
<canvas width="100" height="100" id="img4"></canvas>
<canvas width="100" height="100" id="img5"></canvas>
<canvas width="100" height="100" id="img6"></canvas>
<canvas width="100" height="100" id="img7"></canvas>
<canvas width="100" height="100" id="img8"></canvas>
<canvas width="100" height="100" id="img9"></canvas>
</div>
<div class="download">
下载图片
</div>
<script>
var canvas = document.getElementById("mycnavas"); //现将图片放上去
var cxt = mycnavas.getContext("2d");
var img = new Image();
img.src = "../img/img10.jpg";
window.onload = function() {
cxt.drawImage(img, 0, 0, 400, 300); //画好图片的位置
}
var arr = []; //将切的图片存到数组里面
document.getElementsByClassName("newpohoto")[0].onclick = function() {
var q = 1;
for (var i = 0; i < 3; i++) {
for (var j = 0; j < 3; j++) {
var data = cxt.getImageData(j * 100, i * 100, 400, 100); //类似于“复制”功能
var img = document.getElementById("img" + q)
var newcxt = img.getContext("2d");
newcxt.putImageData(data, 0, 0); //类似“粘贴”功能
arr.push(console.log(img.toDataURL(q + ".png"))) //toDataURL()方法的两个参数：DataURL(type, encoderOptions) type指定转换为base64编码后图片的格式，如：image/png、image/jpeg、image/webp等等，默认为image/png格式；
q++;
console.log(arr)
}
}
}
//下载切的图片
var arr = [];
document.getElementsByClassName('download')[0].onclick = function() {
for (var i = 0; i < 9; i++) {
var a = document.createElement('a');
a.download = 'img' + (i + 1);
a.href = arr[i];
document.body.appendChild(a);
a.click();
}
}
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
JavaScript 图片切割效果(放大镜)第1/4页
上一个版本由于是初次接触这类效果,而且是三个大功能一起开发,能力所限,所以仅仅是实现了效果就完成了. 近来我把其中的 拖放效果 和 缩放效果 单独出来研究,经过整理和完善,再套进切割效果,个人感觉效果已经不错了. 要说明的是这个只是一个效果,并不是真正的切割图片,要获取真正的切割图片请参考 图片切割系统 . 效果预览请看这里 完整实例下载代码太多贴不出来,只好给个效果图: 程序说明 这个效果主要分三个部分:层的拖放.层的缩放.图片切割(包括预览). 其中 层的拖放 和 层的缩放 我已经在其他两篇
-
javascript+canvas制作九宫格小程序
js核心代码 复制代码 代码如下: /* *canvasid:html canvas标签id *imageid:html img 标签id *gridcountX:x轴图片分割个数 *gridcountY:y轴图片分割个数 *gridspace:宫格空隙 *offsetX:x*y宫格相对canvas(0,0)X坐标偏移量 **offsetX:x*y宫格相对canvas(0,0)Y坐标偏移量 *isanimat:是否启用动画显示 */ function ImageGrid(can
-
javascript实现的图片切割多块效果实例
本文实例讲述了javascript实现的图片切割多块效果.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang=&quo
-
JavaScript canvas实现九宫格切图效果
本文实例为大家分享了canvas实现九宫格切图效果的具体代码,供大家参考,具体内容如下 首先页面展示 直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"
-
基于Python实现图片九宫格切图程序
目录 1.python代码实现图片分割成九宫格 2.C++代码实现图片分割成九宫格(附Opencv配置教程) 1.python代码实现图片分割成九宫格 需要包含的库,没有下载安装的,需要自己安装哦. 实现原理很简单,就是用PIL库不断画小区域,切下来存储成新的小图片. 假设每一个格子的宽和高分别是w.h,那么第row行(从0开始计数),第col列(从0开始计数)的格子左上角坐标和右下角坐标分别是(col * w, row * h),(col * w + w, r * h + h). 代码实例:
-
JavaScript仿京东轮播图效果
本文实例为大家分享了JavaScript实现京东轮播图效果展示的具体代码,供大家参考,具体内容如下 做了一个仿京东的轮播图,当然没有人家官网的精美啦. 主要技术点: 每隔3秒自动切换图片: 鼠标移入图片自动暂停切换,鼠标移出则继续: 点击左右方向按钮手动切换图片: 鼠标移到灰色圆点,显示对应的图片,并加亮显示. HTML代码: <body> <h1>轮播图展示</h1> <div id="did"> <!-- 图片 --> &
-
JavaScript canvas实现七彩太阳光晕效果
本文实例为大家分享了JavaScript canvas实现七彩太阳光晕效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"
-
原生javascript+CSS实现轮播图效果
本文实例为大家分享了javascript+CSS实现轮播图效果的具体代码,供大家参考,具体内容如下 1.html <ul id="banner" ></ul> 2.css ul{ list-style:none; position: absolute; padding: 0; left: 0; right: 0; bottom: 0; top:0; margin:auto; width: 800px; height:200px; } 3.js //生成轮播图 e
-
JavaScript canvas实现动态点线效果
本文实例为大家分享了JavaScript canvas实现动态点线效果的具体代码,供大家参考,具体内容如下 效果预览 1.实现效果 画彩色点 相近的点产生连线 点线运动,遇到边界反弹 选中点,可拖动点改变位置* 2.具体实现 初始化相关变量 var c = document.getElementById("myCanvas"); //设置canvas大小 c.height = document.body.offsetHeight; c.width = document.body.off
-
JavaScript实现简单轮播图效果
本文实例为大家分享了js实现简单轮播图效果的具体代码,可以实现左右翻转,图片切换显示等效果,供大家参考,具体内容如下 效果展示: 代码展示: <!doctype html> <html> <!-- 学习功能:使用JavaScript实现图片轮播,左右翻转,图片切换显示等. author: lisa于2018-5-30 --> <title> <meta charset="utf-8"> </title> <b
-
javascript使用canvas实现饼状图效果
使用canvas写一个饼状图,供大家参考,具体内容如下 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docume
-
JavaScript仿小米轮播图效果
本文是自己仿写的小米轮播图的写法,通过透明度改变进行轮播的,新手,写的可能不是很好,有啥不合理的情况,望提出,指正,全部的代码放最下面 有很多写法重复,有空的时候,我把重复的代码封装一下 关于透明度渐变的动画效果 比如 delayOpacity(OliArray[pre],0,-0.1); 就是将OliArray[pre]这个对象的透明度转换成0,速度为0.1 function delayOpacity(obj,target,speed){ clearInterval(timer); timer