将链接转成base64格式生成二维码和把页面生成图片

将链接转成base64格式

function getUrlBase64 (url, etx, callback) {var canvas = document.createElement('canvas')var ctx = canvas.getContext('2d')var img = new Image()img.src = urlimg.crossOrigin = 'Anonymous'img.onload = function () {canvas.width = img.widthcanvas.height = img.heightctx.drawImage(img, 0, 0)var dataUrl = canvas.toDataURL('image/' + etx)callback.call(this, dataUrl)canvas = null}
}

使用：

  getUrlBase64('./default.png', 'png', function (base64) {console.log(base64)})

注意：本地是不可以的需要起一个服务用http-server就可以注意可能有跨域问题

生成二维码

这里用的是一个插件qrcode   cnpm i qrcode --save

html部分<canvas id="canvas" style="display:none"></canvas>js:import QRCode from 'qrcode'function createQrcode () {var that = thisvar url = location.hrefQRCode.toCanvas(canvas, url, function (err) {if(!err) {// 证明生成了二维码（canvas） 然后把二维码转为图片console.log(canvas.toDataURL('image/png'))}})
}

页面或者部分区域生成为一张图

用到了html2canvas  cnpm i html2canvas --save

js:
import html2canvas from 'html2canvas'html2canvas((document.getElementById('share')).then((canvas) => {var img = canvas.toDataRUL('image/png')
})

将链接转成base64格式生成二维码和把页面生成图片相关推荐

Vue+element-ui上传logo图片到后端生成二维码展示到页面
Vue+element-ui上传logo图片生成二维码展示到页面该文章将介绍如何通过前端上传二维码logo图片在后台生成二维码,并将生成的二维码转换成Base64编码返回给前端在页面展示,用户扫码二 ...
生成二维码跳转页面（转）
生成二维码跳转页面(转) 用的google二维码包写的原文链接:https://www.iteye.com/blog/suko-2244138 原文没有配maven,这里给一份 <depend ...
纯前端实现一键生成二维码,打开新页面展示二维码
如何实现这个需求呢首先我们需要生成二维码,而且要打开一个新的页面展示,那么我们需要img标签来展示图片的载体,那么生成图片src必不可少的.无论我们的项目是spa,还是多页面应用,我们这里都要用bas ...
JS生成二维码以及保存页面为图片的解决方案:html2Canvas+file-saver+qrcodejs2的使用心得以及解决图片失真，保存不完整的解决办法
前言最近因为工作需求,需要前端根据后端传过来的链接生成二维码,并且要使用JS保存页面为图片.然后网上搜了很多解决办法.最终都是用h5的canvas进行绘制然后保存为图片.其中,又以html2Canv ...
tp框架后台利用二维码生成器生成二维码跳转页面
1.先在某个控制器里写一个拼接跳转页面链接信息的方法,如: 要跳转的链接是 http://xxxxx.xxx.cn/index.php?s=/Admin/Test/index/id/101/cid/1 ...
前端生成二维码及把页面转为图片保存到本地
以vue项目为例,其他类型项目其实也是一样的所需components: QRCode html2canvas npm install qrcodejs2 -- save npm install ht ...
生成二维码及微信长按识别二维码
参考网友文档: js生成二维码及解决二维码在微信中不能识别来自 https://blog.csdn.net/qq_41429765/article/details/111915775?ops_req ...
字符串生成二维码并且批量打包下载
所需依赖包 qrcode 二维码生成的插件库 jszip 用来打包压缩的一个库 file-saver 文件保存下载的插件库 npm install jszip npm install file-sav ...
thinkphp6项目使用phpqrcode生成二维码
首先下载phpqrcode扩展文件 phpqrcode下载链接下载完之后把文件解压到根目录下的vendor中需要用到的参数: 第一个参数$text,就是代码里的URL网址参数, 第二个参数$out ...

将链接转成base64格式生成二维码和把页面生成图片

将链接转成base64格式

生成二维码

页面或者部分区域生成为一张图

将链接转成base64格式生成二维码和把页面生成图片相关推荐

最新文章

热门文章