admin管理员组文章数量:1579085
前言:对于海报的下载,大家可能都不太陌生,手机上下载一张海报图片清爽而又便捷,
废话不多说,上代码👇
//下载依赖
yarn add html2canvas
下载好了依赖的插件后,到咱们开始写代码的时候,
<div id="html2canvas">
<Row>
<Col span={24} style={{ textAlign: 'center' }}>
<Title level={5}>运营平台</Title>
</Col>
</Row>
<img src={currentQrCodeUrl} className={styles.img} />
</div>
这个插件使用时候的时候,按照你这个包裹的id给你渲染成canvas画布来进行下载
import {Button} from 'antd';
const canvasImg = () => {
let canvasEle = document.getElementById('html2canvas'); //获取元素
html2canvas(canvasEle, {
scale: 2, //缩放
useCORS: true,
width: window.screen.availWidth,
height: window.screen.availHeight,
windowWidth: document.body.scrollWidth,
windowHeight: document.body.scrollHeight,
x: window.pageXOffset,
y: window.pageYOffset,
}).then((canvas) => {
//处理你生成的canvas
let a = document.createElement('a'); // cxt.toDataURL()
a.setAttribute('href', canvas.toDataURL('image/png', 1)); //toDataUrl:将canvas画布信息转化为base64格式图片
a.setAttribute('download', 'downImg'); //这个是必须的,否则会报错
a.setAttribute('target', '_self');
a.click();
a.remove();
document.body.appendChild(a);
});
};
<Button type="primary" onClick={() => canvasImg}>
下载
</Button>
在这里如果直接在react项目里面粘贴使用了,报错了骂街骂楼主,sb楼主写的垃圾帖子,别慌往下看
let codeUrl = 'https://rcms-1256904754.cos.ap-nanjing.myqcloud/appCode/1620467413341.png';
convertImgToBase64(codeUrl, (base64Img) => {
setCurrentQrCodeUrl(base64Img); // img标签图片是解析的一个base64位图片,这个是由canvas先转成一个base64的,以防图片有跨域现象在里面加了crossOrigin
});
const convertImgToBase64 = (url, callback, outputFormat) => {
var canvas = document.createElement('CANVAS'),
ctx = canvas.getContext('2d'),
img = new Image();
img.crossOrigin = 'Anonymous';
img.src = url;
img.onload = () => {
canvas.height = img.height;
canvas.width = img.width;
ctx.drawImage(img, 0, 0);
let dataURL = canvas.toDataURL(outputFormat || 'image/png');
console.log(dataURL);
callback.call(this, dataURL);
canvas = null;
};
};
这样来解决解决下载海报时候谷歌浏览器,下载不带img图片,火狐浏览器上面却可以下载,现在用base64就可以解决了,我觉得用图片转成svg也是可以的,但是我还没有做就跟大家分享了,
说到最后希望这篇帖子能够帮助到你,代码可以抄但是更得理解,多敲才是王道希望你对代码有着真挚的感情,对自己敲出的代码都有不一样的自信,感谢您的浏览,愿你出走半生,归来仍是少年
本文标签: 下载不了海报浏览器图片html2canvas
版权声明:本文标题:使用html2canvas下载海报,里面的图片却下载不了兼容谷歌浏览器做下载 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/xitong/1727849803a1133468.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论