编辑，请参阅问题结束。
在我的应用程序中，我有两个帆布元素。一个显示分层的透明png，另一个显示从文件输入中获取图像并掩盖它。所选图像在未掩盖的地方是透明的。然后将此图像转换为dataUrl，转换为拟合到第一个画布，并添加为第一个画布的顶层。
台式机浏览器上的所有内容都按预期工作：Chrome OSX，Safari OSX。我只在负载上添加它，因此我确保不会发生任何比赛条件。
在Android Chrome和Safari ios上，转换为Todataurl的画布是透明的。如果我在第二个画布中添加非透明图像，则渲染图像甚至在移动设备上都会显示。
要检查我将所谓的透明画布添加到身体中。它在桌面上正确显示，但在移动浏览器上是透明的。在这里简化的JS。为了方便起见，我正在使用Fabric.js，但是没有LIB的问题是相同的。我什至添加了背景颜色。然后只有颜色会显示。有什么想法，为什么在移动浏览器上的todataurl呈现仅透明像素？
<body>
<canvas id="canv"></canvas>
<script src="fabric.js"></script>
<script>
// main canvas
var c = new fabric.Canvas('canv');
c.setWidth(200);
c.setHeight(200);
var i = document.createElement('img');
i.src = 'dummy.jpg';
// i.src = 'dummy1.png';
i.onload = function(e) {
//document.body.appendChild(i);
scale = 1; // resizes the image
var ci = new fabric.Image(i);
ci.set({
left: 0,
top: 0,
scaleX: scale,
scaleY: scale,
originX: 'left',
originY: 'top'
}).setCoords();
// temporary canvas, will be converted to dataurl, contains transformed image
var tmpCanvas = new fabric.Canvas();
tmpCanvas.setWidth(100);
tmpCanvas.setHeight(100);
ci.scaleToWidth(100);
tmpCanvas.add(ci);
tmpCanvas.renderAll();
// create image from temporary canvas
var customImage = new fabric.Image.fromURL(tmpCanvas.toDataURL({ format: 'png' }), function (cImg) {
// add it to original canvas
c.clear();
c.add(cImg);
c.renderAll();
data = c.toDataURL({ format: 'png' });
// resized image
var newc = new fabric.StaticCanvas().setWidth(300).setHeight(300);
var newImg = new fabric.Image.fromURL(data, function (c1Img) {
newc.add(c1Img);
newc.renderAll();
// append to body to check if canvas is rendered correctly
document.body.appendChild(newc.lowerCanvasEl);
});
});
}
</script>
编辑：我解决了问题，但在JavaScript侧找不到问题。
问题是我将临时画布复制到另一个画布上。通过在PNG中找到非透明像素的边界框来计算添加的画布的比例和位置，该框是为此目的而生成的。简而言之。
在应用程序开始时，在另一个临时画布中计算了边界框(基于此答案(。尽管所有尺寸的蒙版及其画布都正确设置了，并且从未将画布添加到DOM中，但是当在小屏幕上加载时，边界盒的结果与全屏幕结果不同。经过大量测试，我发现这也是在桌面上。
因为我已经花了很多时间在这个问题上，所以我决定尝试计算PHP中的界限并将其放入数据属性中。效果很好！
对于那些对PHP解决方案感兴趣的人：
function get_bounding_box($imgPath) {
$img = imagecreatefrompng($imgPath);
$w = imagesx($img);
$h = imagesy($img);
$bounds = [
'left' => $w,
'right' => 0,
'top' => $h,
'bottom' => 0
];
// get alpha of every pixel, if it is not fully transparent, write it to bounds
for ($yPos = 0; $yPos < $h; $yPos++) {
for ($xPos = 0; $xPos < $w; $xPos++) {
// Check, ob Pixel nicht vollständig transparent ist
$rgb = imagecolorat($img, $xPos, $yPos);
if (imagecolorsforindex($img, $rgb)['alpha'] < 127) {
if ($xPos < $bounds['left']) {
$bounds['left'] = $xPos;
}
if ($xPos > $bounds['right']) {
$bounds['right'] = $xPos;
}
if ($yPos < $bounds['top']) {
$bounds['top'] = $yPos;
}
if ($yPos > $bounds['bottom']) {
$bounds['bottom'] = $yPos;
}
}
}
}
return $bounds;
}
问题是我将临时画布复制到另一个画布上。通过在PNG中找到非透明像素的边界框来计算添加的画布的比例和位置，该框是为此目的而生成的。简而言之。
在应用程序开始时，在另一个临时画布中计算了边界框(基于此答案(。尽管所有尺寸的蒙版及其画布都正确设置了，并且从未将画布添加到DOM中，但是当在小屏幕上加载时，边界盒的结果与全屏幕结果不同。经过大量测试，我发现这也是在桌面上。
因为我已经花了很多时间在这个问题上，所以我决定尝试计算PHP中的界限并将其放入数据属性中。效果很好！
对于那些对PHP解决方案感兴趣的人：
function get_bounding_box($imgPath) {
$img = imagecreatefrompng($imgPath);
$w = imagesx($img);
$h = imagesy($img);
$bounds = [
'left' => $w,
'right' => 0,
'top' => $h,
'bottom' => 0
];
// get alpha of every pixel, if it is not fully transparent, write it to bounds
for ($yPos = 0; $yPos < $h; $yPos++) {
for ($xPos = 0; $xPos < $w; $xPos++) {
// Check, ob Pixel nicht vollständig transparent ist
$rgb = imagecolorat($img, $xPos, $yPos);
if (imagecolorsforindex($img, $rgb)['alpha'] < 127) {
if ($xPos < $bounds['left']) {
$bounds['left'] = $xPos;
}
if ($xPos > $bounds['right']) {
$bounds['right'] = $xPos;
}
if ($yPos < $bounds['top']) {
$bounds['top'] = $yPos;
}
if ($yPos > $bounds['bottom']) {
$bounds['bottom'] = $yPos;
}
}
}
}
return $bounds;
}