使用domtoimage插件生成图片模糊失真问题

在使用插件过程中，domtoimage插件生成的图片会模糊失真，经过n久找到了方法，过了N久的今天有同事问我怎么解决的，想了半天才想起来怎么解决，代码为其他人改写的，为了方便自己也方便大家，这里记录一下

在domtoimage插件包中找到src文件下的dom-to-image.js文件，全选修改其中代码

(function (global) {'use strict';var util = newUtil();var inliner = newInliner();var fontFaces = newFontFaces();var images = newImages();// Default impl optionsvar defaultOptions = {// Default is to fail on error, no placeholderimagePlaceholder: undefined,// Default cache bust is false, it will use the cachecacheBust: false};var domtoimage = {toSvg: toSvg,toPng: toPng,toJpeg: toJpeg,toBlob: toBlob,toPixelData: toPixelData,impl: {fontFaces: fontFaces,images: images,util: util,inliner: inliner,options: {}}};if (typeof module !== 'undefined')module.exports = domtoimage;elseglobal.domtoimage = domtoimage;/*** @param {Node} node - The DOM Node object to render* @param {Object} options - Rendering options* @param {Function} options.filter - Should return true if passed node should be included in the output*          (excluding node means excluding it's children as well). Not called on the root node.* @param {String} options.bgcolor - color for the background, any valid CSS color value.* @param {Number} options.width - width to be applied to node before rendering.* @param {Number} options.height - height to be applied to node before rendering.* @param {Object} options.style - an object whose properties to be copied to node's style before rendering.* @param {Number} options.quality - a Number between 0 and 1 indicating image quality (applicable to JPEG only),defaults to 1.0.* @param {String} options.imagePlaceholder - dataURL to use as a placeholder for failed images, default behaviour is to fail fast on images we can't fetch* @param {Boolean} options.cacheBust - set to true to cache bust by appending the time to the request url* @return {Promise} - A promise that is fulfilled with a SVG image data URL* */function toSvg (node, options) {options = options || {};copyOptions(options);return Promise.resolve(node).then(function (node) {return cloneNode(node, options.filter, true);}).then(embedFonts).then(inlineImages).then(applyOptions).then(function (clone) {return makeSvgDataUri(clone,options.width || util.width(node),options.height || util.height(node));});function applyOptions (clone) {if (options.bgcolor) clone.style.backgroundColor = options.bgcolor;if (options.width) clone.style.width = options.width + 'px';if (options.height) clone.style.height = options.height + 'px';if (options.style)Object.keys(options.style).forEach(function (property) {clone.style[property] = options.style[property];});return clone;}}/*** @param {Node} node - The DOM Node object to render* @param {Object} options - Rendering options, @see {@link toSvg}* @return {Promise} - A promise that is fulfilled with a Uint8Array containing RGBA pixel data.* */function toPixelData (node, options) {return draw(node, options || {}).then(function (canvas) {return canvas.getContext('2d').getImageData(0,0,util.width(node),util.height(node)).data;});}/*** @param {Node} node - The DOM Node object to render* @param {Object} options - Rendering options, @see {@link toSvg}* @return {Promise} - A promise that is fulfilled with a PNG image data URL* */function toPng (node, options) {return draw(node, options || {}).then(function (canvas) {return canvas.toDataURL();});}/*** @param {Node} node - The DOM Node object to render* @param {Object} options - Rendering options, @see {@link toSvg}* @return {Promise} - A promise that is fulfilled with a JPEG image data URL* */function toJpeg (node, options) {options = options || {};return draw(node, options).then(function (canvas) {return canvas.toDataURL('image/jpeg', options.quality || 1.0);});}/*** @param {Node} node - The DOM Node object to render* @param {Object} options - Rendering options, @see {@link toSvg}* @return {Promise} - A promise that is fulfilled with a PNG image blob* */function toBlob (node, options) {return draw(node, options || {}).then(util.canvasToBlob);}function copyOptions (options) {// Copy options to impl options for use in implif (typeof (options.imagePlaceholder) === 'undefined') {domtoimage.impl.options.imagePlaceholder = defaultOptions.imagePlaceholder;} else {domtoimage.impl.options.imagePlaceholder = options.imagePlaceholder;}if (typeof (options.cacheBust) === 'undefined') {domtoimage.impl.options.cacheBust = defaultOptions.cacheBust;} else {domtoimage.impl.options.cacheBust = options.cacheBust;}}function draw (domNode, options) {return toSvg(domNode, options).then(util.makeImage).then(util.delay(100)).then(function (image) {var canvas = newCanvas(domNode);canvas.getContext('2d').drawImage(image, 0, 0);return canvas;});function newCanvas (domNode) {var canvas = document.createElement('canvas');var ctx = canvas.getContext('2d');ctx.mozImageSmoothingEnabled = false;ctx.webkitImageSmoothingEnabled = false;ctx.msImageSmoothingEnabled = false;ctx.imageSmoothingEnabled = false;var scale = options.scale || 1; // 默认值1canvas.width = (options.width * scale) || util.width(domNode);canvas.height = (options.height * scale) || util.height(domNode);ctx.scale(scale, scale) // 添加了scale参数if (options.bgcolor) {ctx.fillStyle = options.bgcolor;ctx.fillRect(0, 0, canvas.width, canvas.height);}return canvas;}}function cloneNode (node, filter, root) {if (!root && filter && !filter(node)) return Promise.resolve();return Promise.resolve(node).then(makeNodeCopy).then(function (clone) {return cloneChildren(node, clone, filter);}).then(function (clone) {return processClone(node, clone);});function makeNodeCopy (node) {if (node instanceof HTMLCanvasElement) return util.makeImage(node.toDataURL());return node.cloneNode(false);}function cloneChildren (original, clone, filter) {var children = original.childNodes;if (children.length === 0) return Promise.resolve(clone);return cloneChildrenInOrder(clone, util.asArray(children), filter).then(function () {return clone;});function cloneChildrenInOrder (parent, children, filter) {var done = Promise.resolve();children.forEach(function (child) {done = done.then(function () {return cloneNode(child, filter);}).then(function (childClone) {if (childClone) parent.appendChild(childClone);});});return done;}}function processClone (original, clone) {if (!(clone instanceof Element)) return clone;return Promise.resolve().then(cloneStyle).then(clonePseudoElements).then(copyUserInput).then(fixSvg).then(function () {return clone;});function cloneStyle () {copyStyle(window.getComputedStyle(original), clone.style);function copyStyle (source, target) {if (source.cssText) target.cssText = source.cssText;else copyProperties(source, target);function copyProperties (source, target) {util.asArray(source).forEach(function (name) {target.setProperty(name,source.getPropertyValue(name),source.getPropertyPriority(name));});}}}function clonePseudoElements () {[':before', ':after'].forEach(function (element) {clonePseudoElement(element);});function clonePseudoElement (element) {var style = window.getComputedStyle(original, element);var content = style.getPropertyValue('content');if (content === '' || content === 'none') return;var className = util.uid();clone.className = clone.className + ' ' + className;var styleElement = document.createElement('style');styleElement.appendChild(formatPseudoElementStyle(className, element, style));clone.appendChild(styleElement);function formatPseudoElementStyle (className, element, style) {var selector = '.' + className + ':' + element;var cssText = style.cssText ? formatCssText(style) : formatCssProperties(style);return document.createTextNode(selector + '{' + cssText + '}');function formatCssText (style) {var content = style.getPropertyValue('content');return style.cssText + ' content: ' + content + ';';}function formatCssProperties (style) {return util.asArray(style).map(formatProperty).join('; ') + ';';function formatProperty (name) {return name + ': ' +style.getPropertyValue(name) +(style.getPropertyPriority(name) ? ' !important' : '');}}}}}function copyUserInput () {if (original instanceof HTMLTextAreaElement) clone.innerHTML = original.value;if (original instanceof HTMLInputElement) clone.setAttribute("value", original.value);}function fixSvg () {if (!(clone instanceof SVGElement)) return;clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg');if (!(clone instanceof SVGRectElement)) return;['width', 'height'].forEach(function (attribute) {var value = clone.getAttribute(attribute);if (!value) return;clone.style.setProperty(attribute, value);});}}}function embedFonts (node) {return fontFaces.resolveAll().then(function (cssText) {var styleNode = document.createElement('style');node.appendChild(styleNode);styleNode.appendChild(document.createTextNode(cssText));return node;});}function inlineImages (node) {return images.inlineAll(node).then(function () {return node;});}function makeSvgDataUri (node, width, height) {return Promise.resolve(node).then(function (node) {node.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml');return new XMLSerializer().serializeToString(node);}).then(util.escapeXhtml).then(function (xhtml) {return '<foreignObject x="0" y="0" width="100%" height="100%">' + xhtml + '</foreignObject>';}).then(function (foreignObject) {return '<svg xmlns="http://www.w3.org/2000/svg" width="' + width + '" height="' + height + '">' +foreignObject + '</svg>';}).then(function (svg) {return 'data:image/svg+xml;charset=utf-8,' + svg;});}function newUtil () {return {escape: escape,parseExtension: parseExtension,mimeType: mimeType,dataAsUrl: dataAsUrl,isDataUrl: isDataUrl,canvasToBlob: canvasToBlob,resolveUrl: resolveUrl,getAndEncode: getAndEncode,uid: uid(),delay: delay,asArray: asArray,escapeXhtml: escapeXhtml,makeImage: makeImage,width: width,height: height};function mimes () {/** Only WOFF and EOT mime types for fonts are 'real'* see http://www.iana.org/assignments/media-types/media-types.xhtml*/var WOFF = 'application/font-woff';var JPEG = 'image/jpeg';return {'woff': WOFF,'woff2': WOFF,'ttf': 'application/font-truetype','eot': 'application/vnd.ms-fontobject','png': 'image/png','jpg': JPEG,'jpeg': JPEG,'gif': 'image/gif','tiff': 'image/tiff','svg': 'image/svg+xml'};}function parseExtension (url) {var match = /\.([^\.\/]*?)$/g.exec(url);if (match) return match[1];else return '';}function mimeType (url) {var extension = parseExtension(url).toLowerCase();return mimes()[extension] || '';}function isDataUrl (url) {return url.search(/^(data:)/) !== -1;}function toBlob (canvas) {return new Promise(function (resolve) {var binaryString = window.atob(canvas.toDataURL().split(',')[1]);var length = binaryString.length;var binaryArray = new Uint8Array(length);for (var i = 0; i < length; i++)binaryArray[i] = binaryString.charCodeAt(i);resolve(new Blob([binaryArray], {type: 'image/png'}));});}function canvasToBlob (canvas) {if (canvas.toBlob)return new Promise(function (resolve) {canvas.toBlob(resolve);});return toBlob(canvas);}function resolveUrl (url, baseUrl) {var doc = document.implementation.createHTMLDocument();var base = doc.createElement('base');doc.head.appendChild(base);var a = doc.createElement('a');doc.body.appendChild(a);base.href = baseUrl;a.href = url;return a.href;}function uid () {var index = 0;return function () {return 'u' + fourRandomChars() + index++;function fourRandomChars () {/* see http://stackoverflow.com/a/6248722/2519373 */return ('0000' + (Math.random() * Math.pow(36, 4) << 0).toString(36)).slice(-4);}};}function makeImage (uri) {return new Promise(function (resolve, reject) {var image = new Image();image.onload = function () {resolve(image);};image.onerror = reject;image.src = uri;});}function getAndEncode (url) {var TIMEOUT = 30000;if (domtoimage.impl.options.cacheBust) {// Cache bypass so we dont have CORS issues with cached images// Source: https://developer.mozilla.org/en/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Bypassing_the_cacheurl += ((/\?/).test(url) ? "&" : "?") + (new Date()).getTime();}return new Promise(function (resolve) {var request = new XMLHttpRequest();request.onreadystatechange = done;request.ontimeout = timeout;request.responseType = 'blob';request.timeout = TIMEOUT;request.open('GET', url, true);request.send();var placeholder;if (domtoimage.impl.options.imagePlaceholder) {var split = domtoimage.impl.options.imagePlaceholder.split(/,/);if (split && split[1]) {placeholder = split[1];}}function done () {if (request.readyState !== 4) return;if (request.status !== 200) {if (placeholder) {resolve(placeholder);} else {fail('cannot fetch resource: ' + url + ', status: ' + request.status);}return;}var encoder = new FileReader();encoder.onloadend = function () {var content = encoder.result.split(/,/)[1];resolve(content);};encoder.readAsDataURL(request.response);}function timeout () {if (placeholder) {resolve(placeholder);} else {fail('timeout of ' + TIMEOUT + 'ms occured while fetching resource: ' + url);}}function fail (message) {console.error(message);resolve('');}});}function dataAsUrl (content, type) {return 'data:' + type + ';base64,' + content;}function escape (string) {return string.replace(/([.*+?^${}()|\[\]\/\\])/g, '\\$1');}function delay (ms) {return function (arg) {return new Promise(function (resolve) {setTimeout(function () {resolve(arg);}, ms);});};}function asArray (arrayLike) {var array = [];var length = arrayLike.length;for (var i = 0; i < length; i++) array.push(arrayLike[i]);return array;}function escapeXhtml (string) {return string.replace(/#/g, '%23').replace(/\n/g, '%0A');}function width (node) {var leftBorder = px(node, 'border-left-width');var rightBorder = px(node, 'border-right-width');return node.scrollWidth + leftBorder + rightBorder;}function height (node) {var topBorder = px(node, 'border-top-width');var bottomBorder = px(node, 'border-bottom-width');return node.scrollHeight + topBorder + bottomBorder;}function px (node, styleProperty) {var value = window.getComputedStyle(node).getPropertyValue(styleProperty);return parseFloat(value.replace('px', ''));}}function newInliner () {var URL_REGEX = /url\(['"]?([^'"]+?)['"]?\)/g;return {inlineAll: inlineAll,shouldProcess: shouldProcess,impl: {readUrls: readUrls,inline: inline}};function shouldProcess (string) {return string.search(URL_REGEX) !== -1;}function readUrls (string) {var result = [];var match;while ((match = URL_REGEX.exec(string)) !== null) {result.push(match[1]);}return result.filter(function (url) {return !util.isDataUrl(url);});}function inline (string, url, baseUrl, get) {return Promise.resolve(url).then(function (url) {return baseUrl ? util.resolveUrl(url, baseUrl) : url;}).then(get || util.getAndEncode).then(function (data) {return util.dataAsUrl(data, util.mimeType(url));}).then(function (dataUrl) {return string.replace(urlAsRegex(url), '$1' + dataUrl + '$3');});function urlAsRegex (url) {return new RegExp('(url\\([\'"]?)(' + util.escape(url) + ')([\'"]?\\))', 'g');}}function inlineAll (string, baseUrl, get) {if (nothingToInline()) return Promise.resolve(string);return Promise.resolve(string).then(readUrls).then(function (urls) {var done = Promise.resolve(string);urls.forEach(function (url) {done = done.then(function (string) {return inline(string, url, baseUrl, get);});});return done;});function nothingToInline () {return !shouldProcess(string);}}}function newFontFaces () {return {resolveAll: resolveAll,impl: {readAll: readAll}};function resolveAll () {return readAll(document).then(function (webFonts) {return Promise.all(webFonts.map(function (webFont) {return webFont.resolve();}));}).then(function (cssStrings) {return cssStrings.join('\n');});}function readAll () {return Promise.resolve(util.asArray(document.styleSheets)).then(getCssRules).then(selectWebFontRules).then(function (rules) {return rules.map(newWebFont);});function selectWebFontRules (cssRules) {return cssRules.filter(function (rule) {return rule.type === CSSRule.FONT_FACE_RULE;}).filter(function (rule) {return inliner.shouldProcess(rule.style.getPropertyValue('src'));});}function getCssRules (styleSheets) {var cssRules = [];styleSheets.forEach(function (sheet) {try {util.asArray(sheet.cssRules || []).forEach(cssRules.push.bind(cssRules));} catch (e) {console.log('Error while reading CSS rules from ' + sheet.href, e.toString());}});return cssRules;}function newWebFont (webFontRule) {return {resolve: function resolve () {var baseUrl = (webFontRule.parentStyleSheet || {}).href;return inliner.inlineAll(webFontRule.cssText, baseUrl);},src: function () {return webFontRule.style.getPropertyValue('src');}};}}}function newImages () {return {inlineAll: inlineAll,impl: {newImage: newImage}};function newImage (element) {return {inline: inline};function inline (get) {if (util.isDataUrl(element.src)) return Promise.resolve();return Promise.resolve(element.src).then(get || util.getAndEncode).then(function (data) {return util.dataAsUrl(data, util.mimeType(element.src));}).then(function (dataUrl) {return new Promise(function (resolve, reject) {element.onload = resolve;element.onerror = reject;element.src = dataUrl;});});}}function inlineAll (node) {if (!(node instanceof Element)) return Promise.resolve(node);return inlineBackground(node).then(function () {if (node instanceof HTMLImageElement)return newImage(node).inline();elsereturn Promise.all(util.asArray(node.childNodes).map(function (child) {return inlineAll(child);}));});function inlineBackground (node) {var background = node.style.getPropertyValue('background');if (!background) return Promise.resolve(node);return inliner.inlineAll(background).then(function (inlined) {node.style.setProperty('background',inlined,node.style.getPropertyPriority('background'));}).then(function () {return node;});}}}
})(this);

使用domtoimage插件生成图片模糊失真问题相关推荐

Visual Studio Code 或某些软件界面出现文字抖动/模糊/失真/残影
电脑上有时候某些软件会出现文字模糊失真抖动或者出现窗口的残影的情况文字模糊失真: 正常情况: 或 ...
如何把UIView转成UIImage，解决模糊失真问题
最近工作中,遇到一个需求,需要把一个UIView对象转成UIImage对象显示.经过网络搜索,找到如下答案: ? 1 2 3 4 5 6 7 8 -(UIImage*)convertViewToIma ...
使用jr-qrcode插件生成图片格式的二维码
生成图片格式的二维码使用的插件:jr-qrcode 下载: npm install jr-qrcode --save 引入: const qrcode = require('jr-qrcode'); ...
谷歌浏览器下图片缩放模糊失真
css中给图片添加此属性: backface-visibility:hidden; -webkit-backface-visibility:hidden; /* Chrome 和 Safari */ ...
Canvas - 绘制图片模糊问题（canvas 生成图片模糊）
Canvas绘制模糊文章目录 Canvas绘制模糊零.问题背景与解决思路一.涉及到的Api 1.关于window.devicePixelRatio canvas出现模糊的原因第一块屏幕测试 w ...
微信小程序画布（canvas）生成图片模糊的解决办法
我们在用微信小程序画canvas可能会遇到生成的图片保存后很模糊的问题,根据之前的经验,我总结了两种解决办法,分别从画canvas,和保存的角度解决,各有利弊. 1.画canvas时,都用设计稿的2倍 ...
微信小程序使用wxml2canvas插件生成图片部分问题记录
文字无法加粗 css样式添加font-weight:bold,但是生成的图片字体未加粗.检查插件源码,发现bold被替换成了700(未设置字重的为400) 解决办法:这里在源码_drawText方法的 ...
android生成图片不失真,Android的PdfRenderer类生成低质量图像
ARGB_8888`仅用于颜色质量,但打印/显示质量与分辨率有关(在屏幕上显示时每英寸点数). 例如,如果您有400 DPI屏幕(每英寸400点)并且想要显示具有此质量的PDF,那么您应该通过Bitm ...
php生成图片颜色失真,Coreldraw导出图片颜色失真怎么办？
CorelDRAW用来画矢量图是很好用的了,不过你会发现你导入ps或者ai制作的图片时,颜色会偏差很多,这是因为CorelDRAW的颜色模式是CKMY的原因.不过你简单的把CKMY模式改成RGB模式, ...

使用domtoimage插件生成图片模糊失真问题

使用domtoimage插件生成图片模糊失真问题相关推荐

最新文章

热门文章