node canvas 服务器端canvas 进行图片组合
2022/4/11 1:13:52
本文主要是介绍node canvas 服务器端canvas 进行图片组合,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
有时基于服务器端的image 生成是比较重要的,比如一些安全特性,更好的控制图片的存储,以及图片像素字体,以及还想使用canvas的一些编程能力
参考使用
const { createCanvas, loadImage } = require('canvas')
const canvas = createCanvas(1000, 500)
const ctx = canvas.getContext('2d')
// Write "Awesome!"
ctx.font = '30px Impact'
ctx.rotate(0.1)
ctx.fillText('测试中文!', 50, 100)
// Draw line under text
var text = ctx.measureText('荣dalong!')
ctx.strokeStyle = 'rgba(0,0,0,0.5)'
ctx.beginPath()
ctx.lineTo(50, 102)
ctx.lineTo(50 + text.width, 102)
ctx.stroke()
// Draw cat with lime helmet
loadImage('dalong-app.png').then((image) => {
ctx.drawImage(image, 200, 50, 1000, 500)
console.log('<img src="' + canvas.toDataURL() + '" />')
})
效果
说明
基于server端canvas 的好处比较明显,就是比较灵活,比较好优化,缺点也是有的,就是性能以及网络开销(优化好了也是会不错的)同时也便于数据
分析
参考资料
https://github.com/niklasvh/html2canvas
https://www.npmjs.com/package/canvas
https://www.npmjs.com/package/jsdom
https://github.com/css/csso
https://github.com/csstree/csstree
https://www.npmjs.com/package/html-to-image
这篇关于node canvas 服务器端canvas 进行图片组合的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-06-26小白家庭 nas 搭建方案-icode9专业技术文章分享
- 2024-06-23AI大模型企业应用实战(14)-langchain的Embedding
- 2024-06-23AI大模型企业应用实战(15)-langchain核心组件
- 2024-06-23AI大模型企业应用实战(16)-langchain核心组件
- 2024-06-23AI 大模型企业应用实战(06)-初识LangChain
- 2024-06-19EntBot.ai: AI Website Chatbot for Product Guides and Development Doc
- 2024-06-17zero-shot-learning-definition-examples-comparison
- 2024-06-06Package Easy(基于 NSIS 的打包exe安装包工具)使用方法-icode9专业技术文章分享
- 2024-06-06基于 casdoor 的 ELK 开源登录认证解决方案: elk-auth-casdoor-icode9专业技术文章分享
- 2024-05-29Elasticsearch慢查询日志配置