如何用Canvas实现将图片切分九分格_前端起步的博客

link之家

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

奔放的包子 · Unity中父物体CanvasGroup组件 ...· 1 月前 ·

睿智的柿子 · [Solved] How do I ...· 5 月前 ·

有腹肌的板栗 · 使用 React 自带的 ...· 7 月前 ·

求醉的大熊猫 · 如何使用mpdf将两个pdf文件的两个部分合 ...· 10 月前 ·

纯真的木瓜 · 土豆网视频下载的三大方法没有下载不了_手机新浪网· 1 年前 ·

酒量小的领带 · vsCode鼠标后退向前导航快捷功能怎么设置 ...· 1 年前 ·

< 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 : 1 px solid ; . newcanvas { width : 316 px ; height : 316 px ; margin : auto ; . newpohoto , . download { width : 300 px ; height : 40 px ; line - height : 40 px ; margin : auto ; background - color : cornflowerblue ; border - radius : 5 px ; cursor : pointer ; margin : 10 px auto ; color : white ; < / style > < / head > < 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 > 首先页面展示直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ...

canvas 是一个可以让我们使用脚本绘图的标签，它提供了一系列完整的属性和方法。我们可以借此来实现图形绘制，图像处理甚至实现简单的动画和游戏制作。 canvas 标签只有两个属性：width和height，用来设定画布的宽和高，如果没有通过标签属性或者脚本来设置，默认为300*150; 好了， canvas 的介绍就先到这里，下面我们来看看javascript结合 canvas 实现图片的裁剪代码：代码如下: var selectObj = null; function ImageCrop( canvas Id, imageSource, x, y, width, height) { var c

之前在逛cssdesignawards时发现了一个把图片内容分割的效果（网址：https://weareludwig.com），大家可以点进去看看，感觉挺炫酷的，于是自己试着实现了一下，效果还不错。效果查看https://codepen.io/geeknoble/pen/OQaOVG 首先我们可以发现图片的内容被分成了一个个小矩形，并对每个矩形进行了随机平移。 Canvas 的drawImage函数可以对图片内容进行裁剪并绘制到 Canvas 画布中，所以该效果主要实现原理就是使用drawImage。主要效果有两个，一个是图片内容的打乱和复原，一个是和下张图片的切换，这两个效果都可以使用draw

之前我们简单的了解了 canvas 的基本用法,这里我们来了解下如何将html内容写入到 canvas 中生成图片，这里我使用到了html2 canvas 插件，这个插件是基于 canvas 实现的 html2 canvas 官网： http://html2 canvas .hertzen.com/ 一：下载html2 canvas 插件 1：直接下载html2 canvas 插件直接点击html2 canvas .min.js，然后直接ctrl+s进行保存即可 2：使用npm进行下载 npm install html2 canvas 二：html2 canvas 使用介绍在html2 canvas 中主要使用两种方法 1：将ht

通过fabric.js绘制多张图片，同理这一步也可以直接使用 canvas 绘制多张图片；通过save()将整个绘制的 canvas 的内容转成base64数据，然后onload方法后对图片进行剪切操作；分割的方法主要就是 canvas 的putImageData 以下为代码demo <!DOCTYPE html> <meta charset="UTF-8"> <meta name="v 　　由于网站更新活动较频繁，其大多数以静态图片为主，设计人员在除了设计图后都要给前端制作人员再次切图从而达到页面加载图片缓慢的问题，为了减少工作量做了该工具。上传一张图，将其分割成指定等份的小图。　　将分割出的多张图片嵌套进公共的活动模版里，并为每张图片设置上要跳转的链接，直接生成页面html 主要实现代码： * Cre...

uniapp用 canvas 实现九宫格切图（typescript）前言上传图片展示图片画布下载图片总结这几天工作比较轻松，所以就有时间发下呆，突然想起前段时间用了一个九宫格切图软件，所以就自己试着开发下，期间不少问题也是问领导的，领导知道我在摸鱼但也很耐心帮我（受宠若惊），所以在这里谢谢他。上传图片 handleUpload(): void { uni.chooseImage({ sizeType: ['original'], success: (chooseI

您可以使用 Canvas API中的drawImage（）函数来实现 PDF文件的放大缩小功能。下面是一个示例：// 获取 Canvas 元素 var canvas = document.getElementById('my Canvas '); // 获取 Canvas 环境 var ctx = canvas .getContext('2d');// 定义要绘制的PDF文件 var pdf = new Image(); pdf.src = 'myPdf.pdf';// 缩放因子 var zoomFactor = 2;pdf.onload = function(){ // 在 Canvas 上绘制PDF文件 ctx.drawImage(pdf, 0, 0, pdf.width * zoomFactor, pdf.height * zoomFactor); 第78行:arr.push(console.log(img.toDataURL(q + ".png"))) arr.push(img.toDataURL(q + ".png")) 就可以正常下载了. 一开始总失败. uni-app获取设备的唯一标识 weixin_45927728: 感谢大佬，666666