Question

我目前正在为我工作的公司改进/修复图片上传网络应用程序。但是我遇到了一个我无法修复的小问题。

问题是，有时toDataURL（）不起作用，它不会以正确的方式格式化图像，留给我一个空的图像框。即使[data-canvas-id]标记包含数据，.toDataURL（）似乎仍然在重新格式化时失败。

以下函数用于在其上传队列中查找画布和图像，设置高度和宽度，并将图像重新格式化为img.src

'id'是图片名称。

function getImageInfoFromCanvas(id) {
  var can = $('[data-canvas-id="' + id + '"]').find('canvas');
  var ctx = can[0].getContext('2d');
  var height = can.attr('height');
  var width = can.attr('width');

  var img = new Image();
  img.src = can[0].toDataURL();

  return { "imageStr": img.outerHTML, "width": width, "height": height };
}

HTML中从中获取画布数据的区域，如下所示

<td>
  <strong>{{ item.file.name }}</strong>
  <div data-canvas-id="{{ item.file.name }}" class="active" ng-show="uploader.isHTML5" ng-thumb="{ file: item._file }">
    <canvas></canvas>
  </div>
</td>

重新格式化的img.src应该是数百行（使用控制台日志检查）

我也注意到当toDataURL（）失败时，宽度和高度也没有正确设置

因此，当图像没有正确地重新格式化时，这就是它发回的全部内容。这基本上是一个空方格。

数据：图像/ PNG; BASE64，iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAAABkW7XSAAAEYklEQVR4Xu3UAQkAAAwCwdm / 9HI83BLIOdw5AgQIRAQWySkmAQIEzmB5AgIEMgIGK1OVoAQIGCw / QIBARsBgZaoSlAABg + UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw / QIBARsBgZaoSlAABg + UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw / QIBARsBgZaoSlAABg + UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw / QIBARsBgZaoSlAABg + UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw / QIBARsBgZaoSlAABg + UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw / QIBARsBgZaoSlAABg + UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQl KgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw / QIBARsBgZaoSlAABg + UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw / QIBARsBgZaoSlAABg + UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw / QIBARsBgZaoSlAABg + UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw / QIBARsBgZaoSlACBB1YxAJfjJb2jAAAAAElFTkSuQmCC

我已经查看了其他帖子，看看我是否能找到问题的解决方案，但那些与我的问题相符的问题。从来没有得到答案

canvas.toDataURL（）无法按预期工作

0 个答案: