[英]canvas saving as image not working on mobile devices
我有一個將多個畫布組合起來並將其保存到一個圖像文件中的代碼。 盡管此功能在非移動設備上有效,但我已在移動設備上對其進行了測試,並且生成了圖像,但打開文件后會顯示一條消息,指出“圖像_由於包含錯誤而無法顯示。”
這是轉換為圖像的代碼:
<script type='text/javascript'>
window.addEventListener('load', function() {
'use strict';
var src = document.getElementById('src');
var dst = document.getElementById('dst');
var dst1 = document.getElementById('dst1');
var input = src.getContext('2d');
var output = dst.getContext('2d');
var output1 = dst1.getContext('2d');
dst.width = dst_w;
dst.height = dst_h;
dst1.width = dst1_w;
dst1.height = dst1_h;
var img=document.getElementById("scream");
input.drawImage(img,0,0);
var sprkl = document.getElementById('sprkl');
var output_s = sprkl.getContext('2d');
input.drawImage(document.getElementById('sparkle'),0,0,150,150);
input.drawImage(document.getElementById('circle'),0,0,<?php echo $lenssize.",".$lenssize.",".$left.",".$top.",".$dia.",".$dia; ?>);
input.drawImage(document.getElementById('circle1'),0,0,<?php echo $lenssize.",".$lenssize.",".$left1.",".$top1.",".$dia1.",".$dia1; ?>);
function gonext() {
var a = document.getElementById('src');
var dataURL = a.toDataURL();
$.post("save.php?filen=<?php echo $filen; ?>", {data: a.toDataURL("image/png")})
window.setTimeout(function() {
document.frmnext.submit();
}, 10000);
}
<div style="position: relative; z-index: 2">
<canvas id="src" width="<?php echo $width; ?>" height="<?php echo $height; ?>"></canvas>
<canvas id="sprkl" style="position: absolute; z-index: 3;"></canvas>
<canvas id="dst" style='position: absolute; z-index: 3'></canvas>
<canvas id="dst1" style='position: absolute; z-index: 3'></canvas>
</div>
為了支持toDataURL
嘗試這個,因為我認為,導出圖像的數據字符串像base64一樣有問題...
我的項目遇到同樣的問題,我找到了解決方案
$('.jSignature').attr('id','image_b_id');
var canvas_1 = document.getElementById('image_b_id');
var image_b_base64 = canvas_1.toDataURL();
創建jSignature Canvas
,我可以在許多移動設備中運行。 但是某些其他設備(例如Galaxy mini)有錯誤...
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.