精华内容
下载资源
问答
  • canvas生成图片

    2019-07-11 15:44:48
    canvas生成图片 结构 注意不要用v-if控制显示隐藏,canvas在dom被删除后在显示时画布上的内容会消失 <div class="mask_operation" v-show="cvsshow"> <div class="cvs-box"> <canvas id="mycvs" v-...

    canvas生成图片

    结构
    注意不要用v-if控制显示隐藏,canvas在dom被删除后在显示时画布上的内容会消失

    <div class="mask_operation" v-show="cvsshow">
                <div class="cvs-box">
                    <canvas id="mycvs" v-show='false' ref="cvs" width="600" height="738"></canvas>
                    <img :src="cvsimg" alt="">
                </div>
                <div class="savebtn" @click="saveImg">长按保存到手机相册</div>
                
            </div>
    

    js
    注意:canvas 调用cvs.toDataURL(“image/png”);生成图片常见的坑
    绘制的图片在画布上不显示:
    原因:绘制路径时图片还未加载完,要在 img.onload 函数内绘制路径

    画布绘制完成显示正常,生成图片时失败,或生成的图片只有文字
    原因:canvas生成图片时会有各种图片跨越的报错
    解决方法:
    1.给img标签加上crossOrigin属性,默认值为anonymous,元素的跨域资源请求不需要凭证标志设置

    				let img = new Image()
                  img.src = imgsrc
                  img.crossOrigin = ""
    
    

    2.将图片转为base64格式,(这个可以请后台人员给个转换的接口)

     this.$http.get('https://ssl2.xxxxx.net/qr_code/index/getImgBase?url='+imgsrc).then((res)=>{
     	
     })
    
    // 生成活动图片
               createdImg(){
                   let imgsrc = this.goodsList[this.user_index].img_url
                   
                   this.maskShow = false
                   this.cvsshow = true
                   let cvs = this.$refs.cvs
                   let ctx=cvs.getContext("2d"); //获取画布2d对象
                   var ratio =  this.getPixelRatio(ctx);
                   // cvs.width = canvas.width * 2
                   // cvs.height = canvas.height * 2;
                   ctx.fillStyle="#fff"
                   ctx.fillRect(0,0,300*2,369*2)
                   ctx.save()
                   ctx.beginPath();
    
                   ctx.font = "30px Arial"
                   ctx.fillStyle="#EB4E3F";
                   ctx.textBaseline='middle'
                   ctx.fillText("邀您一起淘好物",75*2,51*2);
    
                   ctx.font = "24px Arial"
                   ctx.fillStyle = "#EB4E3F"
                   ctx.textBaseline = "bottom"
                   ctx.fillText('¥',15*2,325*2)
    
                   ctx.font = "48px Arial"
                   ctx.fillStyle = "#EB4E3F"
                   ctx.textBaseline = "bottom"
                   ctx.fillText('208',27*2,328*2)
    
                   ctx.font = "24px Arial"
                   ctx.fillStyle = "#999999"
                   ctx.textBaseline = "bottom"  
                   let pp = 360
                   ctx.fillText('¥360',72*2,325*2)
    
                   ctx.fillText('卡云亲子乐园',15*2,355*2)
                   ctx.save()
                   ctx.beginPath();
                   
                   ctx.lineWidth = 0.3;
                   ctx.moveTo(72*2,318*2)
                   ctx.lineTo(112*2,318*2)
                   ctx.stroke()
    
                   ctx.fillStyle="#999";
                   ctx.font = "24px Arial"
                   ctx.textBaseline='middle'
                   ctx.fillText("-长按识别小程序码-",186*2,356*2);
       			
       			//这里是后台提供的一个借口,将网络图片转为base64
                   this.$http.get('https://ssl2.xxxxx.net/qr_code/index/getImgBase?url='+imgsrc).then((res)=>{
       				imgsrc = res.data.data
                       let img = new Image()
                       img.src = imgsrc
                       img.crossOrigin = ""
                       
                       //确保图片已完成加载在绘制路径
                       img.onload = ()=>{
                           ctx.arc(35*2,40*2,25*2,0,2*Math.PI);
                           ctx.strokeStyle="#BFBFBF";
                           // ctx.stroke();
                           ctx.clip();
                           ctx.drawImage(img,10*2,15*2,50*2,50*2)
                           ctx.restore()
    
                           let img2 = new Image()
                           img2.src = imgsrc
                           img2.crossOrigin = ""
                           img2.onload = ()=>{
                               ctx.drawImage(img2,0,75*2,300*2,168*2)
                               let img3 = new Image()
                               img3.src = imgsrc
                               img3.crossOrigin = ""
                               img3.onload = ()=>{
                                   ctx.drawImage(img3,192*2,246*2,93*2,93*2)
                                   this.cvsimg = cvs.toDataURL("image/png");
                               }
                           }
                           
                       }
       			})
    
                   
                   
    
               }
    
    展开全文
  • html2canvas生成图片的一个小的demo,解决了在当时开发过程中遇到的一些bug,demo内有注释
  • vue+canvas 生成签名图片并保存数据库 VUE+ElementUI 最近根据项目需求 在用户生成订单的时候需要附上自己的签名照片,因为考虑到不...1.如何把canvas生成图片 2.如何把生成的图片使用图片上传接口上传到数据库 3.下次

    vue+canvas 生成签名图片并保存数据库

    VUE+ElementUI

    最近根据项目需求 在用户生成订单的时候需要附上自己的签名照片,因为考虑到不能上传图片所以使用canvas画图功能。
    而目前后台接口接收的只是一个字符串 ,所以


    1.前端需要把canvas画出的签名生成图片
    2.把图片上传到服务器生成路径把路径地址保存到数据库
    3.在下次修改编辑的时候需要把图片地址生成图片赋值到canvas中

    遇到的问题
    1.如何把canvas生成图片
    2.如何把生成的图片使用图片上传接口上传到数据库
    3.下次编辑时如何把网络图片地址生成图片并且赋值到canvas中

    在这里插入图片描述

    <template>
    	<section>
    		<el-form ref="form" :model="form" :rules="rules" label-width="120px">
    			....
    			<el-form-item label="签名" prop="signature" class="signatureName">
                	<div class="boardBox" ref="boardBox">
                		<canvas width="680" height="300" ref="board" @mousedown="pcStart" @mousemove="pcMove" @mouseup="pcEnd"> </canvas>
                	</div>
                	<el-button size="mini" type="primary" @click="clear">重新签名</el-button>
                </el-form-item>
    			....
    		</el-form>
    	</section>
    </template>
    
    <script>
    	export default {
    		data(){
    			return{
    				ctx: null,
    	            point: {
    	                x: 0,
    	                y: 0
    	            },
    	            moving: false,   // 是否正在绘制中且移动
    			}
    		},
    		created(){
    			
    		},
    		mounted(){
    			this.start()
    		},
    		methods:{
    			start(){
    	            let board = this.$refs.board;   // 获取DOM
    	            board.width = this.$refs.boardBox.offsetWidth;  // 设置画布宽
    	            board.height = this.$refs.boardBox.offsetHeight;    // 设置画布高
    	            this.ctx = board.getContext('2d');   // 二维绘图
    	            this.ctx.strokeStyle = '#000';   // 颜色
    	            this.ctx.lineWidth = 2;  // 线条宽度
    	        },
    	        // 鼠标按下(开始)
    	        pcStart (e) {
    	            let x = e.offsetX, y = e.offsetY;   // 获取鼠标在画板(canvas)的坐标
    	            this.point.x = x;
    	            this.point.y = y;
    	            this.ctx.beginPath();
    	            this.moving = true;
    	        },
    	        // 鼠标移动(移动中...)
    	        pcMove (e) {
    	            if(this.moving) {
    	                let x = e.offsetX, y = e.offsetY;   // 获取鼠标在画板(canvas)的坐标
    	                this.ctx.moveTo(this.point.x, this.point.y);    // 把路径移动到画布中的指定点,不创建线条(起始点)
    	                this.ctx.lineTo(x, y);  // 添加一个新点,然后创建从该点到画布中最后指定点的线条,不创建线条
    	                this.ctx.stroke();  // 绘制
    	                this.point.x = x, this.point.y = y;   // 重置点坐标为上一个坐标
    	            }
    	        },
    	        // 鼠标松开(结束)
    	        pcEnd () {
    	            if(this.moving) {
    	                this.ctx.closePath();   // 停止绘制
    	                this.moving = false;    // 关闭绘制开关
    	            }
    	        },
    	        clear(){
    	            this.$refs.board.getContext("2d").clearRect(0,0,800,600)
    	        },
    		}
    	}
    </script>
    

    解决问题
    1.如何把canvas生成图片并且把生成的图片上传数据库

    1.使用canvas toDataURL将canvas生成base64图片  并把base64转换成文件
    toImg(){
        var image = new Image();
        this.myImage = this.$refs.board.toDataURL("image/png")
        image.src = this.$refs.board.toDataURL("image/png");
        this.dataURLtoFile( this.myImage,'signature.png')
        return image;
    },
    dataURLtoFile(dataurl, filename) {//将base64转换为文件,dataurl为base64字符串,filename为文件名(必须带后缀名,如.jpg,.png)
        var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
        while(n--){
            u8arr[n] = bstr.charCodeAt(n);
        }
        this.fileList = new File([u8arr], filename, {type:mime});
        this.update(this.fileList)//图片上传
        return new File([u8arr], filename, {type:mime});
    },
    //上传
    update(file){
    	let param = new FormData(); //创建form对象
        param.append('file',file,file.name);//通过append向form对象添加数据  
        //this.uploadImgUrl 后台图片上传接口
        //param上传的文件
        //this.headers:{
        //  Authorization: 'Bearer ' + getToken(),//根据自己项目要求添加
        //  'Content-Type':'multipart/form-data',//必须添加
    	//}
    	/*
    		原本考虑使用Element上传文件接口 可是无奈element上传文件或图片需要点击上传或者选取文件再上传,
    		不能直接把生成的文件或图片直接上传
    	*/
        Axios.post(this.uploadImgUrl,param,{headers:this.headers}).then(response=>{
            if(response.data.code===200){
                this.form.signature = this.serverImgUrl+response.data.fileName;
            }else{
    
            }
        }).catch(e=>{
            this.msgError('签名照生成失败')
        })  
    }
    

    2.把网络路径图片 转换成图片

    imageUrlToBase64(httpUrl) {
    	//一定要设置为let,不然图片不显示
    	let image = new Image();
    	//解决跨域问题
    	image.setAttribute('crossOrigin', 'anonymous');
    	let imageUrl = httpUrl;
    	image.src = imageUrl
    	let that = this;
    	//image.onload为异步加载
    	image.onload = () => {
    		//赋值到canvas中
    		var canvas = this.$refs.board;
            canvas.width = image.width;
    		canvas.height = image.height;
    		canvas.getContext('2d').drawImage(image, 0, 0);
    		//这里的dataurl就是base64类型
    		var dataURL = canvas.toDataURL("image/png");
                  
            this.myImage = dataURL;
    	}
    },
    
    展开全文
  • html2canvas生成图片案例,如不想下载可查看本人博客 https://blog.csdn.net/dream0129/article/details/86983023
  • HTML5 canvas生成图片马赛克效果是一款使用HTML canvas来将图片制作成马赛克效果的js插件。该马赛克插件可以使用canvas生成各种形状的像素马赛克,并将图片按照其颜色深度用不同颜色的马赛克进行渲染,效果十分逼真...
  • 微信小程序之通过Canvas生成图片保存到手机相册
  • 需求:小程序获取到微信头像和昵称,生成2019年随机发生的趣事 实现:微信小程序实现 用canvas 生成图片 并保存
  • 下面小编就为大家分享一篇js 将canvas生成图片保存,或直接保存一张图片的实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue使用html2canvas生成图片前端源码完整! .rar
  • HTML5 canvas生成图片马赛克效果是一款使用HTML canvas来将图片制作成马赛克效果的js插件。该马赛克插件可以使用canvas生成各种形状的像素马赛克,并将图片按照其颜色深度用不同颜色的马赛克进行渲染,效果十分逼真...
  • html2canvas生成图片上传到后台服务器

    千次阅读 2019-09-28 11:46:46
    html2canvas生成图片时,html内容复杂生成的base64数据是很大的,后台根本接收不到。然后我将canvas数据由base64变成了blob; 话不多说,直接上代码。 html2canvas(document.getElementById('im...

    最近做一个生成图片的项目,用到html2canvas可以将需要生成图片的html内容完美生成图片,但是向后台传递数据的时候,就不美好了。html2canvas生成图片时,html内容复杂生成的base64数据是很大的,后台根本接收不到。然后我将canvas数据由base64变成了blob;
    话不多说,直接上代码。

    			html2canvas(document.getElementById('img')).then(canvas=>{
    			    var imgurl = canvas.toBlob((blob)=>{
    			      	//以时间戳作为文件名 实时区分不同文件 按需求自己定义就好
                        let filename = `${new Date().getTime()}.jpg`;
                      	//转换canvas图片数据格式为formData
                        let file2 = new File([blob], filename, {type: 'image/jpg'});
                        let formData = new FormData();
                        formData.append('file', file2);
                        //将转换为formData的canvas图片 上传到服务器
                        this.axios.post('后台接口地址',formData).then(res=>{
                         //图片上传成功之后,再调用对应的其他接口,传递指定的参数
    	                    if(res.data.state == 200){
    	                        this.axios.post('后台接口地址',{
    	                        	img:res.data.data,
    	                        	type:0
    	                        }).then(res=>{
    	                            console.log(res);
    	                        })
    	                    }
                        })
    			    })
    		    });
    

    好了,继续撸代码了。

    展开全文
  • canvas生成图片并解决跨域问题

    千次阅读 2020-05-28 10:13:40
    canvas生成base64长按保存图片 在日常项目中我们经常会... // canvas生成图片 generateImg() { let that = this; // 创建画布 var canvas = document.createElement("canvas"); // 绘制文字环境 var context =

    canvas生成base64长按保存图片

    在日常项目中我们经常会遇到各种个样的保存图片功能,需要运用canvas进行绘图,生成img可以识别的url进行长按保存。

    canvas生成代码

        // canvas生成图片
        generateImg() {
          let that = this;
          // 创建画布
          var canvas = document.createElement("canvas");
          // 绘制文字环境
          var context = canvas.getContext("2d");
          //设置画布倍数
          var getPixelRatio = function(context) {
            var backingStore =
              context.backingStorePixelRatio ||
              context.webkitBackingStorePixelRatio ||
              context.mozBackingStorePixelRatio ||
              context.msBackingStorePixelRatio ||
              context.oBackingStorePixelRatio ||
              context.backingStorePixelRatio ||
              1;
            return (window.devicePixelRatio || 1) / backingStore;
          };
          var scal = getPixelRatio(context);
          // 画布宽度
          canvas.width = 750 * scal;
          // 画布高度
          canvas.height = 1463 * scal;
          //设置倍数
          //清除canvas原有内容
          context.rect(0, 0, canvas.width, canvas.height);
          //设置昵称内容
          var nickeName ="111111";
          var headImgSrc = "https://friso-source.d-energy.cn/friso_campaign_202005/img/headImg.png";
          // 设置字体
          context.font = 28 * scal + "px bold";
          // 设置字体颜色
          context.fillStyle = "#172b5e";
          // 获取字体宽度
          var textWidth = context.measureText(this.userId).width;
          //设置海报底图
          var model = new Image();
          model.crossOrigin = "Anonymous";
    
          this.toDataURL("https://friso-source.d-energy.cn/friso_campaign_202005/img/result1.jpg", function(dataUrl) {
            model.src = dataUrl;
          });
    
          //加载底图并渲染到画布
          model.onload = function() {
            context.drawImage(model, 0, 0, canvas.width, canvas.height);
            var canvasCircle = document.createElement("canvas");
            var ctx2 = canvasCircle.getContext("2d");
            canvasCircle.width = 188;
            canvasCircle.height = 188;
            //设置文案并渲染到画布
            var headImg = new Image();
            that.toDataURL(headImgSrc, function(dataUrl) {
              headImg.src = dataUrl;
            });
            headImg.crossOrigin = "Anonymous";
            context.fillText(
              that.userId,
              (canvas.width - textWidth) / 2,
              500 * scal
            );
            headImg.onload = function() {
              var circle = {
                x: canvasCircle.width / 2,
                y: canvasCircle.height / 2,
                r: canvasCircle.width / 2
              };
              ctx2.clearRect(0, 0, canvasCircle.width, canvasCircle.height);
              //开始路径画圆,剪切处理
              ctx2.save();
              ctx2.beginPath();
              ctx2.arc(circle.x, circle.y, circle.r, 0, Math.PI * 2, false);
              ctx2.clip(); //剪切路径
              ctx2.drawImage(
                headImg,
                0,
                0,
                (188 / scal) * scal,
                (188 / scal) * scal
              );
              //恢复状态
              ctx2.restore();
              var headBase64 = canvasCircle.toDataURL("image/png");
              var NewheadImg = new Image();
              NewheadImg.src = headBase64;
              NewheadImg.crossOrigin = "Anonymous";
              NewheadImg.onload = function() {
                context.drawImage(
                  NewheadImg,
                  (840 / 3) * scal,
                  (750 / 3) * scal,
                  190 * scal,
                  190 * scal
                );
                //二维码
                var checkma = new Image();
                that.toDataURL("https://friso-source.d-energy.cn/friso_campaign_202005/img/checkma.png", function(dataUrl) {
                  checkma.src = dataUrl;
                });
                checkma.crossOrigin = "Anonymous";
                checkma.onload = function() {
                  context.drawImage(
                    checkma,
                    (925 / 3) * scal,
                    (3500 / 3) * scal,
                    140 * scal,
                    140 * scal
                  );
                  var base64 = canvas.toDataURL("image/png");
                  // console.log('base64========',base64)
                  $(".saveimg").attr("src", base64);
                };
              };
            };
          };
        },
    

    那么问题来了,canvas往往会遇到跨域的问题(可以将url转换为blob格式)。base64过大如果直接onload的话会有问题,所以建议转为blob,如果存储数据库话,也尽量转换为blob格式。

        toDataURL(url, callback) {
          var xhr = new XMLHttpRequest();
          xhr.onload = function() {
            var reader = new FileReader();
            reader.onloadend = function() {
              callback(reader.result);
            };
            reader.readAsDataURL(xhr.response);
          };
          xhr.open("GET", url);
          xhr.responseType = "blob";
          xhr.send();
        },
    

    End
    希望可以帮助到大家!!

    展开全文
  • canvas生成图片失真问题 canvas生成图片的过程 把网络图片保存到小程序的缓存中,并获取到图片的信息用getImageInfo 在canvas上绘制想要的图片,用canvas各种方法 使用canvasToTempFilePath或者...
  • UniApp 页面输入内容canvas生成图片保存本地 需求:页面输入内容,点击生成图片按钮,利用canvas绘制出一张图片并且保存下来。 HTML部分 <view class="img-box-top"> <view class="img-left"> <...
  • 版本:html2canvas1.0.0-rc.4 官网文档地址 <https://html2canvas.hertzen.com> ... ...绘制图片最好是在页面加载完毕之后进行,处理好图片跨域问题参考:使用canvas生成图片跨域问题的解决方案 若...
  • 关于html2canvas生成图片空白问题 框架react + mobx "html2canvas": "^1.0.0-rc.7" ``` 111111111111111 提交 ``` ``` var node = document.querySelector('.csbox') ...
  • html2canvas 能够实现在浏览器端、app端直接对整个或部分页面进行截屏。这个html2canvas脚本将当页面渲染成一个canvas图片,通过读取DOM并将不同的样式应用到这些元素上实现。
  • html2canvas生成图片时踩到的坑

    万次阅读 热门讨论 2019-02-11 09:57:01
    html2canvas生成图片时踩到的坑 html2canvas ,是H5生成图片常用的框架,但是由于以前没有用过踩到了N多的坑,现在写下来好让自己以后再用时能注意这些问题; vue 工程下安装html2canvas npm install html2canvas...
  • canvas生成图片toDataURL报错的原因和解决方法
  • html2canvas 生成图片 以及出现白边问题解决办法: 我在写demo的时候,pc端调试正常,但是到了移动端图片底部就会出现 一条白边,我的解决办法就是:backgroundColor: “#ff2e46”, 设置背景色就行了。 整体代码...
  • canvas生成图片并下载图片或者pdf 如题 , 用的是html2canvas和jspdf来实现的 代码需要放到服务器上运行, 不然toDataURL()会显示跨域错误 &amp;amp;lt;script type=&amp;quot;text/javascript&amp;...
  • 使用Canvas我们可以轻松生成各种尺寸的图片,具体实现如下: function resizeImage(src,callback,w,h){ var canvas = document.createElement(canvas), ctx = canvas.getContext(2d), im = n
  • html2canvas生成图片并下载到本地

    千次阅读 2019-03-15 15:47:18
    html2canvas生成图片并下载到本地 欢迎使用Markdown编辑器 你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章,了解一下Markdown的基本语法知识。...
  • H5生成图片的原理是使用 canvas 的 toDataURL 方法生成 base64 图片 直接用 canvas 绘图布局不够方便,有一个很好用的库 html2canvas 官网demo <div id="capture" style="padding: 10px; background: #f5da55">...
  • canvas 生成图片并保存到本地 方案 使用 Canvas 的 toDataURL() 方法 HTMLCanvasElement.toDataURL() 方法返回一个包含图片展示的 data URI 。可以使用 type 参数其类型,默认为 PNG 格式。图片的分辨率为96dpi...
  • 项目中需要使用将思维导图导出成图片,使用html2canvas生成图片在iPhone6上图片空白,查了好久发下将外层div的position:relative去掉后图片生成才正常,但是再次合成的图片内容发生偏移,顶部空白,缺少一部分内容...
  • canvas生成图片所遇到的坑

    千次阅读 2017-07-31 09:48:44
    相信很多童鞋都在运用canvas 生成图片过程中遇到了很多问题。因此分享个人在生成过程中遇到的问题。 1.首先:上一张最终生成的效果图 2.分析下该页面的元素 1)用户头像 2)姓名 3)logo语(图片) 4)...
  • 项目中用canvas生成图片时都为空白,原因为 wx.canvasToTempFilePath必须写在wx.draw()的回调中才能实现 createImg ( imgPath) {//生成图片 const ctx = wx.createCanvasContext('canvasId') ctx.drawImage...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 41,146
精华内容 16,458
关键字:

canvas生成图片