canvas生成海报，然后通过toDataURL转为图片不清晰问题

作者：干杯13ds_198 | 来源：互联网 | 2023-10-10 16:31

12通过canvas生成一张海报,然后通过1canvas.toDataURL("image/png")生成base64。把图片base64显示在1img标签上，然后图片在手机看有点模糊,这是怎么样回事

1
2

通过canvas生成一张海报,然后通过

1	canvas.toDataURL("image/png")

生成base64。
把图片base64显示在

img

标签上，然后图片在手机看有点模糊,这是怎么样回事。
(把生成的海报显示在img标签上的原因是微信有一个长按图片可以保存和收藏的作用。)
demo地址:

1	http://m.haoyuanfl.com/yfl/#/test?hy=f64c8253

1
2
3
4
5
6
7
8
9

let img1 = new Image();

img1.setAttribute("crossOrigin", 'Anonymous')

img1.src = 'https://m.haoyuanfl.com//uploads/admin/distribution_goods/20190724/9e1ac99dc931213a0fb12fdc8df12392.jpg';

img1.Onload= () => {

ctx.drawImage(img1, 0, 0, 520, 720);

let src = canvas.toDataURL("image/png")

this.posterScr = src;

}

推荐阅读

js
校园表白墙微信小程序，校园小情书、告白墙、论坛，大学表白墙搭建教程

小程序的名字必须和你微信注册的名称一模一样在后台注册好小程序。mp.wx-union.cn后台域名https。mp.wx-union.cn ... [详细]

蜡笔小新 2023-10-17 13:53:34
php
手把手教你使用GraphPad Prism和Excel绘制回归分析结果的森林图

本文介绍了使用GraphPad Prism和Excel绘制回归分析结果的森林图的方法。通过展示森林图，可以更加直观地将回归分析结果可视化。GraphPad Prism是一款专门为医学专业人士设计的绘图软件，同时也兼顾统计分析的功能，操作便捷，可以帮助科研人员轻松绘制出高质量的专业图形。文章以一篇发表在JACC杂志上的研究为例，利用其中的多因素回归分析结果来绘制森林图。通过本文的指导，读者可以学会如何使用GraphPad Prism和Excel绘制回归分析结果的森林图。 ... [详细]

蜡笔小新 2023-12-10 18:32:57
get
用ESP32与Python实现物联网(IoT)火焰检测报警系统

下图是本案例除硬件连线外的3步导学开发过程，每个步骤中实现的功能请参考图中的说明。在硬件连线完成之后我们建议您先使用“一分钟上云体验”功能预先体验本案例的实际运行效果 ... [详细]

蜡笔小新 2023-10-17 12:48:17
io
微软头条实习生分享深度学习自学指南

本文介绍了一位微软头条实习生自学深度学习的经验分享，包括学习资源推荐、重要基础知识的学习要点等。作者强调了学好Python和数学基础的重要性，并提供了一些建议。 ... [详细]

蜡笔小新 2023-12-14 20:58:32
io
云原生边缘计算之KubeEdge简介及功能特点

本文介绍了云原生边缘计算中的KubeEdge系统，该系统是一个开源系统，用于将容器化应用程序编排功能扩展到Edge的主机。它基于Kubernetes构建，并为网络应用程序提供基础架构支持。同时，KubeEdge具有离线模式、基于Kubernetes的节点、群集、应用程序和设备管理、资源优化等特点。此外，KubeEdge还支持跨平台工作，在私有、公共和混合云中都可以运行。同时，KubeEdge还提供数据管理和数据分析管道引擎的支持。最后，本文还介绍了KubeEdge系统生成证书的方法。 ... [详细]

蜡笔小新 2023-12-14 16:49:01
get
【译】发送表单数据

这是原文链接：sendingformdata许多情况下，我们使用表单发送数据到服务器。服务器处理数据并返回响应给用户。这看起来很简单，但是 ... [详细]

蜡笔小新 2023-12-14 16:19:10
default
数据库的存储结构及其重要性

本文介绍了数据库的存储结构及其重要性，强调了关系数据库范例中将逻辑存储与物理存储分开的必要性。通过逻辑结构和物理结构的分离，可以实现对物理存储的重新组织和数据库的迁移，而应用程序不会察觉到任何更改。文章还展示了Oracle数据库的逻辑结构和物理结构，并介绍了表空间的概念和作用。 ... [详细]

蜡笔小新 2023-12-14 16:00:02
io
Centos7.6安装Gitlab教程及注意事项

本文介绍了在Centos7.6系统下安装Gitlab的详细教程，并提供了一些注意事项。教程包括查看系统版本、安装必要的软件包、配置防火墙等步骤。同时，还强调了使用阿里云服务器时的特殊配置需求，以及建议至少4GB的可用RAM来运行GitLab。 ... [详细]

蜡笔小新 2023-12-14 14:01:06
js
Windows下配置PHP5.6的方法及注意事项

本文介绍了在Windows系统下配置PHP5.6的步骤及注意事项，包括下载PHP5.6、解压并配置IIS、添加模块映射、测试等。同时提供了一些常见问题的解决方法，如下载缺失的msvcr110.dll文件等。通过本文的指导，读者可以轻松地在Windows系统下配置PHP5.6，并解决一些常见的配置问题。 ... [详细]

蜡笔小新 2023-12-14 12:37:25
get
的错误消息：

ZSI.generate.Wsdl2PythonError: unsupported local simpleType restriction ... [详细]

蜡笔小新 2023-12-13 20:28:08
io
Webmin远程命令执行漏洞复现及防护方法

本文介绍了Webmin远程命令执行漏洞CVE-2019-15107的漏洞详情和复现方法，同时提供了防护方法。漏洞存在于Webmin的找回密码页面中，攻击者无需权限即可注入命令并执行任意系统命令。文章还提供了相关参考链接和搭建靶场的步骤。此外，还指出了参考链接中的数据包不准确的问题，并解释了漏洞触发的条件。最后，给出了防护方法以避免受到该漏洞的攻击。 ... [详细]

蜡笔小新 2023-12-13 16:14:53
get
解决nginx启动报错epoll_wait() reported that client prematurely closed connection的方法

本文介绍了解决nginx启动报错epoll_wait() reported that client prematurely closed connection的方法，包括检查location配置是否正确、pass_proxy是否需要加“/”等。同时，还介绍了修改nginx的error.log日志级别为debug，以便查看详细日志信息。 ... [详细]

蜡笔小新 2023-12-12 13:19:04
php
MACElasticsearch安装步骤及验证方法

本文介绍了MACElasticsearch的安装步骤，包括下载ZIP文件、解压到安装目录、启动服务，并提供了验证启动是否成功的方法。同时，还介绍了安装elasticsearch-head插件的方法，以便于进行查询操作。 ... [详细]

蜡笔小新 2023-12-13 23:42:43
数组
Perl的测试框架Test::Base简介及使用方法

本文介绍了Perl的测试框架Test::Base，它是一个数据驱动的测试框架，可以自动进行单元测试，省去手工编写测试程序的麻烦。与Test::More完全兼容，使用方法简单。以plural函数为例，展示了Test::Base的使用方法。 ... [详细]

蜡笔小新 2023-12-13 20:05:31
数组
智能消息服务数字短信使用FAQ

本文介绍了智能消息服务数字短信的开通流程和操作步骤，包括开通数字短信的路径、申请流程、控制台操作以及API接口对接模式。同时还介绍了数字短信模板的创建规则和要求，包括审核状态的说明和建议。 ... [详细]

蜡笔小新 2023-12-12 13:08:10

干杯13ds_198

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章