使用canvas画图，转换成图片路径

let canvas= document.createElement('canvas'); //创建canvas 对象canvas.width = 500;
canvas.height = 500;let pen = canvas.getContext('2d');  //创建context 对象let img = new Image(); //创建img对象做为背景
img.src = 'img/2.jpg';img.onload = ()=>{   //这个方法很重要，在图片加载完再开始绘制，不然背景会是空白pen.drawImage(img,0,0,500,400);pen.font = '60px Georgia';pen.fillStyle = '#ffcd00';pen.textBaseline = 'top'pen.fillText('七七',200,200);let dataUrl = canvas.toDataURL('image/jpge');  //转换换成base64位格式路径
}

ps 你可以在页面上创建一个div <div id="main"></div>
然后 document.getElementById('main').appendChild(canvas);添加到页面上查看效果

使用canvas画图，转换成图片路径相关推荐

页面绘制 canvas 并转换成图片实现长按保存
前言基于 uni-app 进行m端 app 开发的时候,碰上一个需求是将卡片弹窗生成图片,之前工作有用过 html2image 等插件,虽然简单便捷,但是经常会碰见一些奇奇怪怪的兼容性问题,因此此次 ...
vue中怎么把图片转换成base64字符串 , 以及base64字符串怎么转换成图片路径
一 , 项目根路径npm i vant , 安装vant组件库 , main.js中引入并注册vant 二 , 页面中使用 van-uploader上传文件的组件第一种方法 : 在提交表单时拿到上传 ...
二维码验证码转换成图片路径
第一步:封装的接口加上blob responseType: "blob" 第二步:获取的返回值加上转换 window.URL.createObjectURL() 就可以看到的生成的 ...
使用的是html5的canvas将文字转换成图片
当前功能的运用场景是:用户需要传文件给他人,在用户选择文件之后需要显示一个文件图标和所选文件的名称. 当前代码部分是摘自网上,但是已经忘记在什么地方获取的,如有侵权联系小弟后自当删除. 注意:必须在h ...
html页面转换成图片的三种方法——canvas、dom-to-image、html2canvas
html页面转换成图片的三种方法--canvas.dom-to-image.html2canvas canvas绘制网络图片报错(跨域) 使用canvas将html页面转成图片 dom-to-imag ...
html2canvas将html代码生成canvas转换成图片，并且保存到本地
html2canvas将html代码生成canvas转换成图片,并且保存到本地 html2canvas 将html转换成canvas展示 convertCanvasToImage 从canvas提取为 ...
Android笔记：将布局转换成图片
如题,需求就是把xml里面的布局转换成图片,然后保存下来,大家觉得特别简单吧,去问过好多人,也查了查很多app都有这么一个功能,当用户完成了app的某个任务时,产品希望用户点击分享的时候,能动态绘制出 ...
xml文件转换成图片_如何把pdf文件转换成图片？
pdf文件怎么转成JPG图片呢?相信有不少人在迷惑,可能还在想着截图等操作来完成转换,但如果是截图成JPG图片后的效果可能很差,并没有之前pdf文件那么清楚.那这样往往打印出来的效果也不怎么理想,那怎 ...
cad图纸怎么转换成图片？
图片相对于CAD文件会更加的方便浏览,这也就是很多将CAD转换成图片的原因,但是笨拙的截图方式是不是已经比较落后了呢,那么见天就分享给你们将CAD转换成图纸的批量方法吧材料:CAD文件,电脑工具: ...

使用canvas画图，转换成图片路径

使用canvas画图，转换成图片路径相关推荐

最新文章

热门文章