正文

canvas踩坑记录(代码片段)

梁小清  梁小清  2022-11-14  816

关键词：

一、绘制一个带有多张图片和文字的canvas。要求将一张矩形的图片，放置进去显示为圆角矩形的图片

　　解决方案，先把图片处理成圆角矩形的样子，再放进去就可以了

　　绘制圆角矩形图片的解决方案

　　效果如下图

<img src="http://pics.sc.chinaz.com/files/pic/pic9/201505/apic11973.jpg" width="400" />
<!--canvas的默认画布大小为300×150-->
<canvas id="j-tab4-canvas" style="border: 1px solid red;">  
        当前浏览器不支持canvas,请更换浏览器后再试
</canvas>
<script>
    window.onload = function() 
        var canvas = document.getElementById("j-tab4-canvas");
        canvas.width = 400;
        canvas.height = 400;
        var context = canvas.getContext("2d");

        //绘制圆角矩形
        context.roundRect(0, 0, 400, 400, 30, true);

        var img = new Image();
                
        img.src = "img/dog.jpg";
        img.onload = function() 
            context.globalCompositeOperation = \'source-in\';
            context.drawImage(img, 0, 0, canvas.width, canvas.height);
            //最后输出一张base64格式的图片url，成功生成一张圆角矩形的图片
            console.log(canvas.toDataURL(\'image/jpeg\',0.92))    
                    
        
    

    //圆角矩形
    CanvasRenderingContext2D.prototype.roundRect = function(x, y, width, height, radius, fill, stroke) 
        if(typeof stroke == "undefined") 
            stroke = true;
        
        if(typeof radius === "undefined") 
            radius = 5;
        
        this.beginPath();
        this.moveTo(x + radius, y);
        this.lineTo(x + width - radius, y);
        this.quadraticCurveTo(x + width, y, x + width, y + radius);
        this.lineTo(x + width, y + height - radius);
        this.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
        this.lineTo(x + radius, y + height);
        this.quadraticCurveTo(x, y + height, x, y + height - radius);
        this.lineTo(x, y + radius);
        this.quadraticCurveTo(x, y, x + radius, y);
        this.closePath();

        if(stroke) 
            //线条颜色
            this.strokeStyle = "rgba(0,0,0,0)";
            this.stroke();
        
        if(fill) 
            //填充颜色
            this.fillStyle = "rgba(0,0,0,1)";
            this.fill();
        
    ;
</script>

踩坑说明：

1、在行间使用style="width:300px;height:200px"，是无效的。强烈建议用js来设置canvas的宽高

1、绘制图片的 drawImage（）方法。在把图片绘制的时候，自带了图片压缩功能。绘制图片的时候尽量使用质量高一点的图片（上传一张5M的图片，最后输出300k）。不然容易出现图片模糊的现象。另外就是无法控制压缩的程度

2、canvas生成图片的方法toDataURL（\'image/jpeg\',0.92），带有2个参数。这个方法在生成图片的时候，也是自带图片压缩功能

　　这两个值是参数的默认值。参数一是设置生成图片的格式，可以是png，jpg。参数二，是设置压缩图片的程度，范围是0-1，1为不压缩，越靠近0，压缩的越厉害

3、toDataURL（）有跨域问题。

　　假如绘制的图片跨域了，就会提示 "Uncaught SecurityError: Failed to execute \'toDataURL\' on \'HTMLCanvasElement\': Tainted canvases may not be exported."（被污染的画布无法输出）

　　解决办法：访问的服务器允许，资源跨域使用，也就是说设置了CORS跨域配置，Access-Control-Allow-Origin（启用了 CORS 的图片 ）

　　绘制图片如下所示：设置img.src要放下onload（）的后面　

var img = new Image();
//访问的服务器允许，资源跨域使用，也就是说设置了CORS跨域配置，Access-Control-Allow-Origin
img.setAttribute(\'crossOrigin\', \'anonymous\');
				
img.onload = function() 
	context.globalCompositeOperation = \'source-in\';
	context.drawImage(img, 0, 0, canvas.width, canvas.height);
	//最后输出一张base64格式的图片url，成功生成一张圆角矩形的图片
	console.log(canvas.toDataURL(\'image/jpeg\',0.92))   

img.src="http://pics.sc.chinaz.com/files/pic/pic9/201505/apic11973.jpg"

　　4、canvas绘图模糊的问题

　　　　解决办法原理，将canvas画布放大来绘画，再缩小显示。详情请参考以下两篇博文

　　　　https://segmentfault.com/a/1190000003730246，

　　　　https://www.jianshu.com/p/4c4312dc7fc5

　　　　这里粗略讲一下我的解决过程。我创建一个canvas画布，画了一个圆和写了一句话，可以看到圆和字线条上都是有点模糊的。

为了解决模糊的问题

1、引入 hidpi-canvas-polyfill

2、代码如下所示，绘画一张图片。经验证，该方法只对绘制图片才有效。对文字和绘画图形效果不大

<!--canvas的默认画布大小为300×150-->
<canvas id="j-tab4-canvas" style="border: 1px solid red;">  当前浏览器不支持canvas,请更换浏览器后再试</canvas>
<script>
	window.onload = function() 
		var canvas = document.getElementById("j-tab4-canvas");
		canvas.width = 400;
		canvas.height = 400;
		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 ratio = getPixelRatio(context);
		console.log(ratio);

		var img = new Image();		
		img.onload = function() 
			context.drawImage(img, 0, 0, canvas.width, canvas.height);
		
                img.src = "img/min.png";
	
</script>

这样也就没有更好的办法了，那就剩下一个，把canvas画布设置的宽高值大一点就是了。

大概也就这么多了！

参考博客：https://blog.csdn.net/qingchunweiliang/article/details/71305352

uniapp开发微信小程序设置字体踩坑记录(代码片段)

最近接到一个需求，需要在微信小程序中做出用户可自定义缩放旋转图片和文字的定制功能，开发使用uni-app，这里记录几个问题。一、canvas设置字体大小的数值需为整数使用canvas渲染文字时，需要设置文字的字体... 查看详情

微信小程序wxml-to-canvas使用完整流程以及踩坑记录

第一次写文章记录自己的踩坑记录我们小程序的客户说商品生成的海报有点模糊，因为之前都是后台生成的，没有办法设置清晰度参数，所以需要换一种生成方式，之前也看过wxml-to-canvas，但是一直没机会好好研究用上，这次机... 查看详情

django踩坑记录3(代码片段)

路径如下：admin.py的代码：fromdjango.contribimportadminfromsign.modelsimportEvent,Guest#Registeryourmodelshere.classEventAdmin(admin.ModelAdmin):list_display=[‘id‘,‘name‘,‘status‘,‘address‘,‘start_time‘]classG 查看详情

electron踩坑记录(代码片段)

...做一个PC端应用，就来学学Electron，以下为学习Electron时的踩坑记录。安装在国内安装electron的时候，可能会因为网络原因遇到卡在Buildingfreshpackages...（yarn）或者是卡在nodeinstall.js（npm）这一步上。在项目的根目录下创建.yarnrc或.np... 查看详情

gitlab踩坑记录(代码片段)

基于docker安装gitlabgitlab:image:gitlab/gitlab-cerestart:alwayshostname:‘81.70.22.100‘environment:GITLAB_OMNIBUS_CONFIG:|external_url‘http://81.70.22.100:8443‘nginx[‘redirect_http_to_https‘]=falseletsencr 查看详情

html2canvas用法及部分踩坑实录(代码片段)

什么是html2canvs?html2canvas的作用就是允许让我们直接在用户浏览器上拍摄网页或其部分的“截图”。它的屏幕截图是基于DOM的，因此可能不会100%精确到真实的表示，因为它不会生成实际的屏幕截图，而是基于页面上可... 查看详情

html2canvas用法及部分踩坑实录(代码片段)

vue+element踩坑记录(代码片段)

Vue+Element踩坑 1.获取后台返回的数据，是个数组，循环后展示出来<el-table-column:label="$t(‘common.cardModel.guz‘)"sortable="custom"prop="assetNo"><templateslot-scope="scope"><divv-for="(item,index)inscope. 查看详情

pyqt5安装踩坑记录(代码片段)

pyqt5安装踩坑记录😶(ˉ▽ˉ；)…😶文章目录pyqt5安装踩坑记录先是参考了这篇文章:https://www.cnblogs.com/syh6324/p/9484208.html，使用了：pipinstallPyQt5-tools然后报错：ERROR:pip'sdependencyresolverd 查看详情

jenkinspipeline的语法实例介绍及踩坑记录(代码片段)

本文介绍一下Jenkinspipeline的语法实例介绍及踩坑记录废话不多说，直接上案例pipelineagentanystagesstage(‘download‘)stepsecho‘Thisisabuildstep‘gitcredentialsId:‘0c3d0852-8a03-42e2-a893-a445308a257b‘,url:‘http://192.168.0.6/softwa 查看详情

华为云kafkapoc踩坑记录(代码片段)

2019/03/0818:29最近在进行华为云相关POC验证，个人主要负责华为云DMSkafka相关。大致数据流程是，从DIS取出数据，进行解析处理，然后放入kafka，再从kafka中取出数据然后放到ElasticSearch以及OBS里面。kafka作为中间层次，发挥着中间件... 查看详情

vue+electron开发踩坑记录(代码片段)

文章目录背景框架选型开发过程踩坑记录问题1vue-cli2无法使用vueclipluginelectronbuilder问题2vuecomponent调用ipcRenderer注意！！！补充：vue-cli2和vue-cli3/4的一些区别参考资料背景最近由于项目上的要求，需要开发一个... 查看详情

pyltp安装踩坑记录(代码片段)

LTP（LanguageTechnologyPlatform）由哈工大社会计算与信息检索研究中心开发，提供包括中文分词、词性标注、命名实体识别、依存句法分析、语义角色标注等丰富、高效、精准的自然语言处理技术。LTP的源码是C++，也提供Java和Python版... 查看详情

scrapy爬虫踩坑记录(代码片段)

Scrapy作为一个优秀的爬虫框架，尽管其体系已相当成熟，但实际操作中其实还是需要借助其他插件的力量来完成某些网站的爬取工作，今天记录一下博主爬虫路上的一些坑及解决方案，避免大家走太多弯路。一、D... 查看详情

（webflux）004webfilter踩坑记录(代码片段)

一、背景使用SpringWebFlux的WebFilter时，由于不熟悉或一些思考疏忽，容易出现未知的异常。记录一下排查与解决方案，给大家分享一下。二、问题2.1问题描述在测试接口方法时，出现的错误信息如下（对一些项... 查看详情

fastlane一键打包/发布app-使用记录及踩坑(代码片段)

最近有空,搞一搞fastlane一键打包发布Appstore/testflight/fir.com相关资料安装fastlanebrewinstallfastlanefastlane的安装和使用Fastlane官方文档fastlane自动化打包(android)fastlane-fastfile一些基础idea使用vscode,可以安装一些代码片段插件,快速上手如何... 查看详情

安装cpu版本gluonts过程记录踩坑(代码片段)

Anaconda新建一个干净的虚拟环境#删除指定虚拟环境condaremove-nGluonTS--allcondacreate-nGluonTSpython=3.7condaactivateGluonTS个人在安装过程中发现，最好不要用国内源装mxnet、gluonts，老容易出问题，版本不兼容什么的。pipinstallmxne... 查看详情