无法确定canvas drawImage无法处理PNG图像的原因
canvas drawImage无法处理PNG图像的原因可能是由于以下几个原因之一：
- 图像路径错误：首先需要确保图像的路径是正确的，包括文件名和文件路径。如果路径错误，浏览器将无法找到图像文件并进行处理。
- 图像加载未完成：在调用drawImage方法之前，需要确保图像已经完全加载。可以使用图像的onload事件来检测图像是否加载完成，然后再调用drawImage方法。
- 跨域安全限制：如果图像位于不同的域名下，浏览器可能会出于安全考虑而限制对图像的访问。这种情况下，可以通过设置图像的CORS头信息来解决跨域问题。
- 图像格式不支持：canvas的drawImage方法支持多种图像格式，包括PNG、JPEG、GIF等。如果图像格式不受支持，可能会导致无法处理PNG图像。可以尝试将图像转换为其他格式再进行处理。
- canvas大小不匹配：如果canvas的大小与图像的大小不匹配，可能会导致图像无法正确显示。确保canvas的大小与图像的大小相匹配，或者使用drawImage方法的参数来指定图像的显示位置和大小。
综上所述，以上是可能导致canvas drawImage无法处理PNG图像的几个常见原因。如果问题仍然存在，可以进一步检查代码逻辑和调试相关参数来解决问题。
相关·内容
嘿，我想画多个图像，一个是画布背景，两个是可以在画布上移动的玩家。这是我的问题:当我将var canvas和canvas属性放在全局时，它不起作用。但是当我把它放回img.onload函数中时，它就能工作了！为什么会这样?我有什么选择？
var canvas = document.getElementById("Canvas");
canvas.width = 500;
canvas.height = 500;
var g = canvas.getContext("2d");
var img = new Image();
img.src
浏览 3提问于2014-02-13得票数 0
2回答
画布分层
、、
我目前正在从事一个项目，类似于使用Javascript，HTML5和CSS3。我设法创建了滑块效果，并将加号按钮添加到多层画布(4层:底部图像，顶部图像，文本显示和箭头滑块)。我的问题是鼠标悬停在加号按钮上并显示文本层。我需要访问底层才能访问加号。我如何才能做到这一点呢？我在Javascript和HTML5上完全是新手。
HTML代码：
<div id="container">
<div id="arrow_container" ondrop="drop(event)" ondragover="allowDrop
浏览 0提问于2012-12-01得票数 4
回答已采纳
我的代码中有一个问题，它不起作用，我也找不到米施特，我认为这是因为很多嵌套和我在错误的地方设置了一个支架。代码中的函数是动画，是画布顶部的一些图像，比这些图像从上到下缓慢地像一个观察者一样从上到下来。我希望你能理解我的解释。
console.log("hey");
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d'); //ctx = contex
v
浏览 10提问于2017-06-21得票数 1
回答已采纳
我正在尝试使用ctx.drawImage()裁剪图像，并使用canvas.toDataURL()获取裁剪的图像数据。但是，在刷新页面几次之前，我无法获得正确的数据。我想知道如何才能立即获得裁剪的图像数据，而不是刷新页面。
<script>
var imageObj = new Image();
imageObj.src = 'http://localhost:63342/war/img/IMG_20140131_102234.jpg';
var canvas = document.createElement('canvas')
浏览 0提问于2014-07-16得票数 2
回答已采纳
我有以下函数，它获取一个图像作为参数：
function getIcon(img){
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
var dataURL = canvas.toDataURL("image/png");
return dataU
浏览 1提问于2012-04-25得票数 0
回答已采纳
我在画布负载上绘制图像，并将ontouchmove事件绘制为所绘制的图像。我面临的问题是，当图像在画布中移动时，多个图像实例正在绘制，这根据功能是正确的，但我只想要最后一个实例？
var x1 = 0;
var x2 = 0;
var y1 = 0;
var y2 = 0;
var imagesLoaded = 0;
var img = '';
var img1 = '';
var img2 = '';
var img3 = '';
var img4
浏览 1提问于2013-06-20得票数 0
回答已采纳
是否可以使用clearRect删除使用drawImage绘制到画布上的png图像的一部分？
我正在尝试这样的东西，但它不起作用：
<canvas id="canvas"></canvas>
<img id="pngimg" src="" alt="" />
[...]
canvas = document.getElementById("canvas");
pngimg = document.getElementById("pngimg");
[...]
p
浏览 11提问于2011-07-21得票数 1
1回答
我试图建立一个画布和6个不同的图像的东西。我的模板如下所示： <div>
<img id="right_arm" src="../assets/body_parts/right_arm.png" style="display:none;" alt="">
<img id="head" class="char-img" style="display:none;" src="../assets/image
浏览 73提问于2019-12-20得票数 0
回答已采纳
我有一个与在中类似的问题
使用CSS添加图像不会将其包含在实际的画布中。虽然它看起来不错，但不会通过“导出为PNG”操作导出。到目前为止，尝试在画布上使用.drawImage()确实可以显示图像，但是PNG导出仍然不会嵌入图像。
我使用的方法是：
// GET THE IMAGE.
var img = new Image();
img.src = 'img/myimage.png';
// WAIT TILL IMAGE IS LOADED.
img.onload = function () {
fill_canvas(
浏览 1提问于2018-10-04得票数 0
我想要做的是绘制一个我已经保存在本地的图像到画布上。然后，我想将该画布转换为png图像。图像加载到画布上，但我创建的png图像是空白的。有人知道怎么解决这个问题吗？
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img src="" id="canvasImage" />
<canvas id="canvasId" width="160" height="145">&
浏览 1提问于2014-11-28得票数 0
1回答
我遇到了一些问题，使用drawImage方法将一个比250 to宽和高度更大的预加载图像放置到画布上。
//Canvas
var canvas = document.createElement("canvas");
var contex = canvas_image.getContext('2d');
canvas.width = 350;
canvas.height = 350;
canvas.id = 'canvas'
$('.canvas').append(canvas);
//Draw Image to canvas
浏览 1提问于2013-09-25得票数 1
回答已采纳
下面的代码无法保存图像。
我想在画布上绘制一个单击图像，并想用另一个保存按钮保存单击。
<head>
<script type="text/javascript">
function draw()
{
var canvas = document.getElementById("MyCanvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d"); // G
浏览 0提问于2012-09-04得票数 0
下面是我的代码..
<canvas id="myCanvas" width="640" height="480">
</canvas>
<script type="text/javascript">
// Javascript Goes Here
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
浏览 3提问于2015-03-20得票数 0
我想在HTML5画布上显示一个图像，而不是先把它放在屏幕上。我尝试过<noscript>，但它不起作用，因为我无法将图像包含到我的代码中。这是我的HTML： <html>
<noscript>
<img id = "tiles" src="img/tiles.png">
</noscript>
<title>Super Mario World</title>
<head>
</head>
&
浏览 14提问于2020-04-24得票数 2
回答已采纳
标题用词很差，但没有办法简明扼要地描述问题。我将图像绘制到动态创建的画布的2D上下文中。然后通过toDataURL将上下文的数据保存到图像中，然后图像将在每一帧上绘制。下面的代码是压缩的，我将绘制多个图像到上下文，而不仅仅是一个；这就是为什么我要保存到一个图像。我只会立刻画出部分图像，但图像保持不变，所以我认为这是最好的方法，如果有其他的选择，我会很高兴地接受这些作为答案。
简而言之:画在一幅图像上的许多图像。部分图像绘制每一帧。以下代码起作用：
var picture = new Image();
picture.src = "images/tilesheet.png";
v
浏览 1提问于2016-02-05得票数 1
回答已采纳
我正在开发一个Cordova windows10应用程序，在该应用程序中，我将图片作为“jpg”使用(navigator.camera.getPicture(resolve, reject, {...encodingType: 0,...})捕获，将其移动到另一个位置，将其更改为“.png”，目前正在尝试调整它的大小。但是，当我尝试加载图片时，它不会加载而是抛出：
DOM7009:无法在url：‘./myImage.png’处解码图像以默示' image /png‘。
如果图像被捕获为'.png‘，但如果图像最初是'.jpeg’并且扩展名改为‘..png’，则工
浏览 0提问于2017-07-19得票数 0
4回答
我正在开发一种工具，该工具可以让用户在上面绘制图像并保存。
工作原理:将图像作为背景，在其上绘图
什么不起作用:保存整个画布..我只是存储图形，而不是与图像一起绘制。
我通过堆栈，但找不到适合我的解决方案。
<canvas id="drawtool" width="800" height="300" style="background:url(image/test.png) no-repeat center center"></canvas>
而到drawimage的JS是
var canvas = do
浏览 0提问于2013-02-28得票数 0
当声音图像被点击时，我想要发生一些事情，我已经看到了很多关于这个鼠标系统功能的东西，但是它似乎无法工作。我是新来的，所以我的代码可能有点恶心。
<html>
<head>
<title>Lunchtime Assasin</title>
<script type="application/javascript" language="javascript">
window.onload = draw;
var background = new Image
浏览 5提问于2014-04-18得票数 0
回答已采纳
我正试图通过javascript从某人的网络摄像头中获取快照。代码工作，除了结果的图像是拉伸的方式太多，我可读的。
我弄乱了:ctx.drawImage(视频，0，0)；行
我试过ctx.drawImage(视频，0,1280,720)，没有差别
我已经尝试过ctx.drawImage(视频，0，0,100,100)；有很大的不同。它使整个图像看起来，但太小的眼睛。
代码：
<html>
<head>
<video autoplay></video>
<img src="" width=1280, height=720>
浏览 3提问于2014-10-29得票数 0
这是我编写的代码，用来调整图像的高宽比，它可以在chrome上工作，但在firefox上不显示，有谁知道出了什么问题。
var image = new Image();
image.src = data;
//$(image).load(function () {
var aspectRatio = getAspectRatio(parseFloat($(image).prop('naturalWidth')),
parseFloat($(image).pr
浏览 1提问于2014-04-15得票数 3
回答已采纳
我的问题是：
uncaught exception: [Exception... "Component returned failure code: 0x80040111 (NS_ERROR_NOT_AVAILABLE) [nsIDOMCanvasRenderingContext2D.drawImage]" nsresult: "0x80040111 (NS_ERROR_NOT_AVAILABLE)" location: "JS frame :: file:///***************.js :: redrawView :: line 308
浏览 1提问于2011-07-27得票数 11
回答已采纳
function loadMain(){
background.src = "background.png"
button.src = "button.png"
}
function drawMain(){
ctx.drawImage(background, 0, 0, canvas.width, canvas.height);
ctx.drawImage(button, 100, 100 , canvas.width/10, canvas.height/10);
}
这个方法可以很好地加载，我的问题是:如果我的鼠标在
浏览 0提问于2016-05-20得票数 1
我有两个html img对象，具有不同的src urls。我想合并这两个图像(使用画布)，并创建一个合并的img对象。我想给用户选择一个图像从他的位置和第二个图像将是logo和用户可以改变logo的位置，当点击post按钮时，一个图像对象就会生成并能够保存在数据库中。我在写这个javascript对象类型不匹配时遇到了一个错误，我不知道问题出在哪里……
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/
浏览 0提问于2012-08-29得票数 2
回答已采纳
1回答
如何在HTML 5画布中覆盖图像
、、、、
基本上，我有两个图像，我需要在同一时间显示(稍后更多)。var画布=函数(canvasEl，宽度，高度){ this.el= canvasEl；this.el.width =宽度；this.el.height =高度；this.ctx = canvasEl.getContext("2d")；} var画布=新画布(document.querySelector(“#mycanvas”)，1100,650)；
var add = new Image();
add.onload = function() {
canvas.ctx.drawImage(this, 500,-2
浏览 1提问于2013-11-24得票数 0
回答已采纳
1回答
HTML画布不显示图像
、、、
我无法使用drawImage()将我的图像显示在HTML canvas中。我知道文件路径是正确的，因为当我禁用display: none;时，图像显示得很好。我知道，当您试图在加载之前绘制图像时，可能会发生这种情况，这可以通过使用onload属性来避免。 下面是相关的HTML。 <canvas id='gameScreen'></canvas>
<img id="imgBall"src="assets/images/ball2.png" alt="ball">
<script type=
浏览 29提问于2021-07-25得票数 0
2回答
我有两个函数来显示画布上的图像数据，其中包含一些图像。
这行得通
var canvasElement = document.getElementById("Canvas"),
canvas = canvasElement.getContext("2d");
canvas.fillStyle = "#ff6633"
canvas.fillRect(0,0,200,200);
for(x=0;x<200;x=x+10){
for(y=0;y<200;y=y+10){
p = canvas.getImageData(x, y
浏览 7提问于2013-12-05得票数 0
回答已采纳
1回答
我对toDataURL();方法有问题。我正在尝试保存画布的图像，以便当我调整浏览器/画布的大小时，它可以再次出现在画布的背面(因为无论何时设置画布的宽度，它都会清除它)，然后继续我编写的“绘制”函数，但在不同大小的画布上。这样，我似乎可以无缝地调整画布的大小，而不需要清理它。
在我的代码中，toDataURL();似乎不是在保存图像，也可能是我在调整画布的大小时说错了。我只是将源代码设置为一个普通的.png文件进行了检查，这似乎在后面画得很好。我以前问过这个问题，但我找不到满意的答案.
JS
canvas.onmousemove = draw;
var ctx = canv
浏览 4提问于2015-11-15得票数 0
1回答
我试着用HTML画布制作一个游戏，但我有一个问题。
当我用'window.onload‘调用'init’函数时，我的程序不会加载任何图像。已经创建了画布，但是图像不存在，当我在铬控制台中提交函数时，图像就会出现.因此，我想加载我的图像，并在它完成后执行该函数。
谢谢你帮忙！
var requestAnimId;
// Initialisation
function init() {
var tilemapCtx = new Canvas('tilemap', 800, 600, 1);
var tilemap = new Tilemap(&
浏览 3提问于2015-03-14得票数 3
回答已采纳
我正在尝试编写一个函数，让用户下载在画布中绘制的图像。
下面是代码：
canvas.html:
<html lang="en">
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="canvas.js"> </script>
</head>
<body onload="="draw()">
<butt
浏览 0提问于2017-10-24得票数 0
回答已采纳
2回答
将图像放入数组并显示
、、、
我在将图像放入数组中并在画布对象中显示它们时遇到了一些麻烦。
Jscript代码片段
canvas = document.getElementById('slideshow');
canvasContent = canvas.getContext('2d');
var elements = document.getElementsByClassName('slides');
for (var index = 0; index <= elements.length; index += 1)
{
arrFoto[index] = e
浏览 2提问于2013-05-01得票数 1
回答已采纳
我正在使用Imagick来创建图像，但是它有一个错误: PHP致命错误:默认异常'ImagickDrawException‘，消息“无法设置填充模式URL”
这是我的代码：
$im =()；
$im->新伪图像( 50，50，“渐变:红-黑”)；
$im->setImageFormat("png")；
$draw =新的ImagickDraw()；
$P除->pushPattern(“渐变”，0，0，50，50)；
>复合(Imagick：：COMPOSITE_OVER，0，0，50，50，$im)；
$draw>popPattern()；
浏览 1提问于2014-04-11得票数 0
2回答
画布动画在web浏览器上运行有效，但是当使用iPad和iPhone在移动浏览器上进行测试时，动画永远不会启动。它只是简单地显示背景图像。没有提供错误消息。
动画基本上是一个图像，从屏幕外的左侧的画布，并停止时，它达到75%的画布宽度。
这是代码
<script>
window.addEventListener("load", eventWindowLoaded, false);
function eventWindowLoaded () {
start();
}
function canvasSupport
浏览 0提问于2015-01-27得票数 1
回答已采纳
下面的代码正确地加载了图像，但问题是它异步地加载所有图像。如何一张一张地同步显示所有图片？
@ViewChild('canvas') public canvas: ElementRef;
ImagesWidth: number = 32;
ImagesHeight: number = 32;
images: string = "../assets/blackBoards/Balllmage_";
imageExtension: string = ".png"
@Input() public width = 600;
@Input() public
浏览 0提问于2018-02-12得票数 1
1回答
嗨，我设法使excanvas在IE8中为简单的示例工作，但是我无法制作下面的画布示例，其中包含IE8的绘图图像工作。有没有人有过超能力和绘画的经验。谢谢你的帮助..。
var foo = document.getElementById("foo");
var canvas = document.createElement('canvas');`
canvas.setAttribute("width", 300);
canvas.setAttribute("height", 300);
foo.appendChild(canvas)
浏览 1提问于2013-04-04得票数 2
1回答
我正在尝试创建一个包含信息的"banner“，包括图片。 横幅如下所示： ? 图像将被放置在圆圈上，然后文本将被放置在其他区域。 我的尝试失败了，因为创建了一个空图像。 const { createCanvas, loadImage } = require('canvas'); const canvas = createCanvas(901, 231)
const ctx = canvas.getContext('2d');
const ctxAvatar = canvas.getContext('2d'
浏览 17提问于2019-06-01得票数 0
3回答
我想在一个框架中插入一个图像。我找到了两种方法
drawImage(self，图像，x，y，width=None，height=None，mask=None，preserveAspectRatio=False，anchor='c')Image(filename，width=None，height=None)
我的问题是:如何在帧中添加图像，同时保持其纵横比？
from reportlab.lib.units import cm
from reportlab.pdfgen.canvas import Canvas
from reportlab.platypus import Fr
浏览 2提问于2011-03-16得票数 17
回答已采纳
1回答
我试图通过以下代码使用dataURL()将画布的上下文作为图像下载，但由于某种原因无法工作。但是，当我将画布的上下文替换为它实际工作的图像之外的其他内容时，您能告诉我如何解决这个问题吗 <a href="#" id="downloader" >Download!</a>
<canvas id="canvas"></canvas>
<script>
var canvas = document.getElementById(
浏览 10提问于2021-07-15得票数 0
1回答
希望将画布元素替换为图像元素。 已经尝试使用jquery将画布转换为图像。但是显示的空图像没有任何图像。 <script>
function loadImages(sources, callback) {
var images = {};
var loadedImages = 0;
var numImages = 0;
// get num of sources
for(var src in sources) {
numImages++;
}
浏览 3提问于2019-09-05得票数 0
我试图在一个函数中加载一个图像，但是图像没有显示在屏幕上。没有控制台错误，所以我不知道为什么它不能工作。代码：
var canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
var score = 0;
var menuImg = new Image();
menuImg.src = "images/Startscreen.png";
gamemenu();
//The menu screen
function gamemenu(){
c
浏览 0提问于2012-10-04得票数 0
回答已采纳
我有一个问题，我正在导入一个具有透明背景的高质量的PNG图像，但是当使用ReportLab将图像导入到PDF时，背景变为黑色。
关于如何防止这种情况发生，有什么想法吗？
已解决:将掩码设置为“auto”而不是“无”。
第二期：
导入的PNG文件的质量明显较低(非常像素化)。如何在保持图像质量的同时导入PNG文件？
下面是我当前的代码：
from reportlab.pdfgen import canvas
from reportlab.platypus import Image
from reportlab.lib.pagesizes import letter
from PIL import
浏览 8提问于2017-07-14得票数 1
当我使用drawImage将图像放到画布上时，它看起来总是不像使用标记的相同图像那么清晰。我已经寻找了许多解决方案，例如，降低采样，smoothingEnabled，但都没有帮助。如何提高drawImage的质量？
<html>
<head>
</head>
<body>
<img src="test.png" width="550" height="405">
<canvas id="image"></canvas>
</b
浏览 2提问于2017-01-08得票数 1
回答已采纳
1回答
我有下面的代码。我正在尝试让我的HTML站点在我的画布上呈现背景图像(bg)和管道图像(pipeNorth和pipeSouth)。
我在用铬。
第一次代码尝试
<!DOCTYPE html>
<html>
<head>
<title>Flappy Bird using JS | by Pinzhi</title>
</head>
<body>
<h3>flappyBird by pineNuts</h3>
<canvas id="canvas
浏览 0提问于2019-06-19得票数 0
回答已采纳
2回答
下面的JavaScript文件带有一个名为menu的函数，该函数调用draw函数4个不同的时间在屏幕上显示4个不同的图像。
我需要按编码顺序显示它们，但是每次刷新时都会得到不同的内容。我知道这很可能是因为一些图像加载速度比其他图像快。
我已经在网站上找到了一些其他的例子，解决方案似乎只有在所有的图片都先被加载时才能绘制出来，但是我无法做到这一点。
还有别的办法吗？
var cvs = document.getElementById("canvas");
var ctx = cvs.getContext("2d");
var audio = new Audio(&
浏览 0提问于2018-11-10得票数 1
1回答
我试图在画布上显示一个图像，但是无论出于什么原因，图像都不会显示。我没有收到任何错误，所以我不知道是什么问题。如果有人能帮我，我会非常感激的！这是我的密码。
import React, { useRef, useEffect } from "react";
const Canvas = (props) => {
const canvasReference = useRef(null);
useEffect(() => {
const canvas = canvasReference.current;
const context = can
浏览 1提问于2022-05-24得票数 2
回答已采纳
1回答
我使用下面的代码来设置高质量的图像作为画布的背景。如果我把图像直接设置为背景，它就能工作了。但是图像质量不好。因此，我使用另一个画布有一个良好的质量图像，然后我需要设置为背景。我用的是fabricjs
var _img = new Image();
_img.src = img_base64;
var ctx = canvas.getContext("2d");
_img.onload = function(){
// set size proportional to image
canvas.height = canvas.width * (_img.hei
浏览 1提问于2017-12-16得票数 0
1回答
im使用下面的函数对图像进行编码，使用从用户获得的html5画布(此处im使用本地图像文件)
jsfunction
function imgToDataURL(img) {
var canvas = document.createElement('canvas');
canvas.width = img.naturalWidth;
canvas.height = img.naturalHeight;
var c = canvas.getContext('2d');
c.drawImage(img, 0, 0);
var dataURL = canvas.toDa
浏览 6提问于2014-04-16得票数 0
回答已采纳
1回答
Iam用html做一个项目，只有javascript。我有一个将图像转换为base64的函数，请参阅下面的代码。
function getBase64Image()
{
p = document.getElementById("picField").value;
img.setAttribute('src', p);
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.hei
浏览 0提问于2012-03-05得票数 2
3回答
我想把一个用base64编码的data:image转换成一个普通的图像文件。到目前为止，我的代码如下所示：
this.toDataURL = function() {
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = innerWidth;
canvas.height = innerHeight;
ctx.drawImage(layer0, 0, 0);
ctx.drawI
浏览 6提问于2013-06-27得票数 17
回答已采纳
图像没有绘制到z索引为0的bg_canvas，只有我的主游戏画布覆盖显示，我只包含了代码的开始。
// HTML
<canvas id="bg-canvas" width="768" height="600"></canvas>
<canvas id="canvas" width="768" height="600"></canvas>
// CSS
canvas {
position: absolute;
top: 0;
浏览 0提问于2018-02-04得票数 0
我在这件事上已经束手无策了。尝试将图像绘制到HTML5画布中的非常简单的基本情况。画布比图像大得多，而且是动态大小的。我打算平铺几个不同的图像，但是即使使用简单的drawImage()调用，我也无法在画布中正确地显示图像。我将代码简化为如下所示，但是，我的图像显示的比它应该显示的要大得多。下面，我一次只在drawImage上试用，但没有一种有效。
image = new Image();
image.onload = function() {
canvas = document.getElementById("bigDynamicCanvas");
context
浏览 7提问于2014-06-18得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
