您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
小编给大家分享一下JavaScript中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> <h4>使用canvas实现九宫格切图的效果</h4> <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中canvas如何实现九宫格切图效果”有了一定的了解,如果想了解更多相关知识,欢迎关注亿速云行业资讯频道,感谢各位的阅读!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。