如何使用Webpack将png图片添加到JS？
如何使用Webpack将png图片添加到JS？
提问于 2018-09-12 12:03:59
我正在开发一款HTML5游戏。我使用的是一个使用了Webpack的样板。我一直在尝试将本地文件夹中的png图像添加到js文件中，但一直收到以下错误：
GET http://localhost:3000/alien.png 404 (Not Found)和Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The HTMLImageElement provided is in the 'broken' state.
我在canvas.js文件中使用的代码如下：
let alienImg = new Image();
alienImg.src = 'alien.png';
c.drawImage(alienImg, 300, 300)是我在尝试将图像放到画布上的过程中做错了什么，还是在我的webpack.config.js文件中有什么问题？
下面是webpack的文件，供参考：
module: {
rules: [
{
test: /\.(js)$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
},
{
test: /\.html$/,
loader: 'html-loader?attrs[]=video:src'
},
{
test: /\.mp4$/,
loader: 'url-loader?limit=10000&mimetype=video/mp4'
},
{
test: /\.png$/,
loader: "url-loader?mimetype=image/png"
}
]
},有谁能帮帮我吗？提前谢谢你！
Stack Overflow用户
发布于 2018-09-12 12:16:11
我只是使用以下命令: html2Canvas
import html2canvas from 'html2canvas';..。
html2canvas(document.querySelector(selector)).then(canvas => {
console.log(canvas);
document.body.appendChild(canvas)
canvas.setAttribute('downloads', 'nameOfImage.png')
var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
window.location.href = image
});我希望这能在某种程度上有所帮助。如果是这样的话，快乐的日子。:)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52287330
复制相关文章
相似问题
腾讯云开发者
