高清处理
npm install html2canvas
npm install file-saver --save
import html2canvas from 'html2canvas'
import { saveAs } from 'file-saver'
<el-button :loading="loading" @click.stop="saveImg">下载</el-button>
saveImg() {
this.loading = true
const content = this.$refs.screenshot // 要下载成图片的dom
if (!content) {
this.loading = false
return
}
html2canvas(content, {
scale: 2, // 放大倍数,支持小数,可以控制清晰度
letterRendering: true,
backgroundColor: '#F2F4F3',
height: this.$refs.screenshot.clientHeight - 70 // 要转化为图片下载的dom 高度
}).then((canvas) => {
canvas.toBlob(blob => {
this.loading = false
saveAs(blob, `Oferta para ${this.infoItem?.candidateName} .png`)
}, 'image/png')
})
}
是使用html2canvas
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
</head>
<body>
<div id="content" style="width:150px;height:150px;border:1px solid blue;">
<span>Hello World!</span>
<br>
<span>
<h2>Are you hear me?</h2>
</span>
</div>
<button id="btnSave">save</button>
<!-- 1)dom-to-image:dom-to-image
2)html2canvas:html2canvas
3)rasterizeHTML.js:rasterizeHTML.js -->
<script>
$(function () {
$('#btnSave').click(function (event) {
html2canvas($('#content'), {
onrendered: function (canvas) {
document.body.appendChild(canvas);
convertCanvasToImage(canvas);
}
})
});
function convertCanvasToImage(canvas) {
var image = new Image();
image.src = canvas.toDataURL("image/png");
document.body.appendChild(image);
return image;
}
})
</script>
</body>
</html>
使用dom-to-image
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/dom-to-image/2.5.2/dom-to-image.js"></script>
<script src="https://cdn.bootcss.com/FileSaver.js/2014-11-29/FileSaver.js"></script>
</head>
<body>
<input type="button" id="btn" value="do it" />
<h4>两行三列:</h4>
<table id="table" border="1" style="width:200px;border-collapse: collapse;border:1px solid black;">
<tr style="background:green;">
<td rowspan="3">200</td>
<td>200</td>
<td>300</td>
</tr>
<tr style="background:green;">
<td rowspan="2">500</td>
<td>600</td>
</tr>
<tr style="background:green;">
<td>600</td>
</tr>
<tr style="background:skyblue;">
<td rowspan="3">100</td>
<td>200</td>
<td>300</td>
</tr>
<tr style="background:skyblue;">
<td>500</td>
<td>600</td>
</tr>
<tr style="background:skyblue;">
<td>600</td>
<td>600</td>
</tr>
</table>
<script>
$(function () {
//
$("#btn").click(function () {
// 插入图片到html
// var node = document.getElementById('table');
// domtoimage.toPng(node).then(function (dataUrl) {
// var link = document.createElement('a');
// link.download = 'my-image-name.jpeg';
// link.href = dataUrl;
// link.click();
// var img = new Image();
// img.src = dataUrl;
// document.body.appendChild(img);
// });
// 下载png图片
// domtoimage.toBlob(document.getElementById('table'))
// .then(function (blob) {
// window.saveAs(blob, 'my-node.png');
// });
// 下载jpeg图片(失败)
// domtoimage.toJpeg(document.getElementById('my-node'), { quality: 0.95 })
// .then(function (dataUrl) {
// console.log(dataUrl)
// });
function filter(node) {
return (node.tagName !== 'i');
}
domtoimage.toSvg(document.getElementById('my-node'), { filter: filter })
.then(function (dataUrl) {
/* do something */
console.log(dataUrl)
});
// var node = document.getElementById('table');
// domtoimage.toPixelData(node).then(function (pixels) {
// for (var y = 0; y < node.scrollHeight; ++y) {
// for (var x = 0; x < node.scrollWidth; ++x) {
// pixelAtXYOffset = (4 * y * node.scrollHeight) + (4 * x);
// /* pixelAtXY is a Uint8Array[4] containing RGBA values of the pixel at (x, y) in the range 0..255 */
// pixelAtXY = pixels.slice(pixelAtXYOffset, pixelAtXYOffset + 4);
// }
// }
// });
})
})
</script>
</body>
</html>
FileSaver简介
var a = document.createElement("a");
var url = window.URL.createObjectURL(
new Blob([this.gethtml()], {
type: ''
})
);
a.href = url;
a.download = "file.html";
a.click();
window.URL.revokeObjectURL(url);
}
FileSaver.js 简介
try {
var isFileSaverSupported = !!new Blob;
} catch (e) {}
require 使用
var FileSaver = require('file-saver');
var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
FileSaver.saveAs(blob, "hello world.txt");
文本变成文件
var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
FileSaver.saveAs(blob, "hello world.txt");
保存画布
var canvas = document.getElementById("my-canvas"), ctx = canvas.getContext("2d");
// draw to canvas...
canvas.toBlob(function(blob) {
saveAs(blob, "pretty image.png");
var file = new File(["Hello, world!"], "hello world.txt", {type: "text/plain;charset=utf-8"});
saveAs(file);
npm install file-saver --save
bower install file-saver
});
参考:https://www.cnblogs.com/jackyWHJ/articles/10435851.html
使用rasterizeHTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/rasterizehtml/1.3.0/rasterizeHTML.allinone.js"></script>
</head>
<body>
<canvas id="canvas" style="width: 300;height: 900;border: 1px solid #ccc;"></canvas>
<img src="./logo.png">
<button onclick="startDownload()">下载</button>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d')
function startDownload() {
// var img = new Image();
// img.onload = function(){
// alert('加载完毕')
// // 将图片画到canvas上面上去!
// ctx.drawImage(img,100,100);
// }
// img.src = "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1537549551&di=3f8d4d76679adcae225387f7d6b199aa&src=http://gss0.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/lvpics/h=800/sign=b49dc48f8718367ab28972dd1e728b68/9922720e0cf3d7ca7f0736d0f31fbe096a63a9a6.jpg";
let imageURL = "https://cdn.glitch.com/4c9ebeb9-8b9a-4adc-ad0a-238d9ae00bb5%2Fmdn_logo-only_color.svg?1535749917189";
var downloadedImg = new Image();
let canvas = document.createElement("canvas");
let ctx = canvas.getContext("2d");
downloadedImg.crossOrigin = "Anonymous";
downloadedImg.src = imageURL
downloadedImg.onload=function(){
ctx.drawImage(downloadedImg, 10, 10);
// // let base = canvas.toDataURL('image/png');// 图片转化base64 画布污染 网路图片
console.log(123)
}
}
// rasterizeHTML.drawHTML(
// '<span style="color: green; font-size: 20px;">HTML</span>' +
// ' with an image ',
// canvas);
// rasterizeHTML.drawURL( url [, canvas] [, options] )
// rasterizeHTML.drawHTML( html [, canvas] [, options] )
// rasterizeHTML.drawDocument( document [, canvas] [, options] )
</script>
</body>
</html>
vue使用
配置文件
async:是否异步解析和呈现的元素
allowTaint:是否允许跨源图像到画布上的污点
useCORS:尝试从服务器加载图像使用歌珥(跨域 配置)
canvas:现有的画布元素使用作为借鉴的基础
foreignObjectRendering:是否使用ForeignObject呈现如果浏览器支持它
imageTimeout:超时(以毫秒为单位)。设置为0以禁用超时
ignoreElements:谓词函数删除匹配元素的呈现
logging:启用日志用于调试目的
onclone:回调函数叫做文档时已经克隆了渲染,可以用来修改的内容呈现在不影响原来的源文档
proxy:Url的代理用于加载跨源图像。如果留空,则不会加载跨源图像
removeContainer:是否清理克隆的DOM元素暂时html2canvas创建
scale:用于规模呈现。默认为浏览器设备像素比
width:画布的宽度
x:作物画布坐标
scrollX:x-scroll位置时使用渲染元素(例如如果元素使用位置:固定)
windowWidth:窗口宽度渲染元素时使用,可能会影响诸如媒体查询
saveImg () {
html2canvas(this.$refs.imageTofile, {
backgroundColor: null
}).then((canvas) => {
let url = canvas.toDataURL('image/png')
let downloadName = this.detailData.basic.act_name + '.png'
this.downloadFile(downloadName, url)
})
},
base64ToBlob (code) {
let parts = code.split(';base64,')
let contentType = parts[0].split(':')[1]
let raw = window.atob(parts[1])
let rawLength = raw.length
let uInt8Array = new Uint8Array(rawLength)
for (let i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i)
}
return new Blob([uInt8Array], {type: contentType})
},
downloadFile (fileName, content) {
let aLink = document.createElement('a')
let blob = this.base64ToBlob(content) // new Blob([content]);
let evt = document.createEvent('HTMLEvents')
evt.initEvent('click', true, true)// initEvent 不加后两个参数在FF下会报错 事件类型,是否冒泡,是否阻止浏览器的默认行为
aLink.download = fileName
aLink.href = URL.createObjectURL(blob)
aLink.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true, view: window}))// 兼容火狐
},
跨域图片本地处理
shareImage() {
this.$nextTick(() => {
let img = document.querySelectorAll("img");
if (img) {
for (var j = 0; j < img.length; j++) {
// console.log(img[j].src, "img");
if (!/data:image\/png|jpeg;base64,/.test(img[j].src)) {
let box = img[j];
let width = img[j].width;
let height = img[j].height;
var canvas = document.createElement("canvas");
let ctx = canvas.getContext("2d");
console.log(width, height, "width,height");
canvas.width = width;
canvas.height = height;
var cimge = new Image();
cimge.crossOrigin = "Anonymous";
var url = img[j].src;
cimge.onload = e => {
ctx.drawImage(cimge, 0, 0, width, height);
let base = canvas.toDataURL("image/png", 0.1);
const bytes = window.atob(base.split(',')[1]);
const ab = new ArrayBuffer(bytes.length);
const ia = new Uint8Array(ab);
for (let i = 0; i < bytes.length; i++) {
console.log(bytes.charCodeAt(i), 'bytes.charCodeAt(i)')
ia[i] = bytes.charCodeAt(i);
}
var blob = new Blob([ab], { type: 'image/png' });
let img = document.createElement("img");
img.src = URL.createObjectURL(blob);
box.parentNode.replaceChild(img, box);
this.htmlcanvas();
};
cimge.src = url;
}
}
}
});
},
方式二
shareImage() {
this.$nextTick(() => {
let img = document.querySelectorAll("img");
if (img) {
for (var j = 0; j < img.length; j++) {
// console.log(img[j].src, "img");
if (!/data:image\/png|jpeg;base64,/.test(img[j].src)) {
let box = img[j];
let width = img[j].width;
let height = img[j].height;
var canvas = document.createElement("canvas");
let ctx = canvas.getContext("2d");
console.log(width, height, "width,height");
canvas.width = width;
canvas.height = height;
var cimge = new Image();
cimge.crossOrigin = "Anonymous";
var url = img[j].src;
cimge.onload = e => {
ctx.drawImage(cimge, 0, 0, width, height);
let base = canvas.toDataURL("image/png", 0.1);
var MyComponent = Vue.extend({
// template: `<img src="${base}" />`
template: `<img :src="bade" />`
data(){
return {
bade:base
}
}
});
var component = new MyComponent().$mount();
box.parentNode.replaceChild(component.$el, box);
this.htmlcanvas();
};
cimge.src = url;
}
}
}
});
},
htmlcanvas() {
this.$nextTick(() => {
html2canvas(this.$refs.imageWrapper, {
width: this.$refs.imageWrapper.offsetWidth,
height: this.$refs.imageWrapper.offsetHeight,
scale: 0.5
}).then(canvas => {
console.log(canvas, "canvas");
let url = canvas.toDataURL("image/png", 0.1);
console.log(url, "url");
// let downloadName = this.detailData.basic.act_name + '.png'
// this.downloadFile(downloadName, url)
});
});
}