如果您通过服务器进行下载（这样您可以命名/转换/后处理等文件），这里有一些帮助：

-使用toDataURL发布数据

-设置标题

$filename = "test.jpg"; //or png
header('Content-Description: File Transfer');
if($msie = !strstr($_SERVER["HTTP_USER_AGENT"],"MSIE")==false)      
  header("Content-type: application/force-download");else       
  header("Content-type: application/octet-stream"); 
header("Content-Disposition: attachment; filename=\"$filename\"");   
header("Content-Transfer-Encoding: binary"); 
header("Expires: 0"); header("Cache-Control: must-revalidate"); 
header("Pragma: public");

-创建图像

$data = $_POST['data'];
$img = imagecreatefromstring(base64_decode(substr($data,strpos($data,',')+1)));

-将图像导出为JPEG

$width = imagesx($img);
$height = imagesy($img);
$output = imagecreatetruecolor($width, $height);
$white = imagecolorallocate($output,  255, 255, 255);
imagefilledrectangle($output, 0, 0, $width, $height, $white);
imagecopy($output, $img, 0, 0, 0, 0, $width, $height);
imagejpeg($output);
exit();

-或透明PNG

imagesavealpha($img, true);
imagepng($img);
die($img);

function exportCanvasAsPNG(id, fileName) {

    var canvasElement = document.getElementById(id);

    var MIME_TYPE = "image/png";

    var imgURL = canvasElement.toDataURL(MIME_TYPE);

    var dlLink = document.createElement('a');
    dlLink.download = fileName;
    dlLink.href = imgURL;
    dlLink.dataset.downloadurl = [MIME_TYPE, dlLink.download, dlLink.href].join(':');

    document.body.appendChild(dlLink);
    dlLink.click();
    document.body.removeChild(dlLink);
}

这是另一种方式，没有字符串，尽管我不知道它是否更快。而不是toDataURL（正如这里所有问题所建议的那样）。在我的情况下，我希望阻止dataUrl/base64，因为我需要一个数组缓冲区或视图。所以HTMLCanvasElement中的另一个方法是toBlob。（TypeScript函数）：

    export function canvasToArrayBuffer(canvas: HTMLCanvasElement, mime: string): Promise<ArrayBuffer> {
  return new Promise((resolve, reject) => canvas.toBlob(async (d) => {
    if (d) {
      const r = new FileReader();
      r.addEventListener('loadend', e => {
        const ab = r.result;
        if (ab) {
          resolve(ab as ArrayBuffer);
        }
        else {
           reject(new Error('Expected FileReader result'));
        }
      }); r.addEventListener('error', e => {
        reject(e)
      });
      r.readAsArrayBuffer(d);
    }
    else {
      reject(new Error('Expected toBlob() to be defined'));
    }
  }, mime));
}

blobs的另一个优点是可以创建ObjectUrl来将数据表示为文件，类似于HTMLInputFile的“文件”成员。更多信息：

https://developer.mozilla.org/en/docs/Web/API/HTMLCanvasElement/toBlob

从<canvas/>上载图像：

async function canvasToBlob(canvas) {
  if (canvas.toBlob) {
    return new Promise(function (resolve) {
      canvas.toBlob(resolve)
    })
  } else {
    throw new Error('canvas.toBlob Invalid')
  }
}

await canvasToBlob(yourCanvasEl)

简单的答案就是获取它的blob并将imgsrc设置为该blob的新对象URL，然后使用一些库将该图像添加到PDF中，例如

var ok=document.createElement（“画布”）正常宽度=400ok.height=140var ctx=ok.getContext（“2d”）；for（设k=0；k<ok.height；k++）(k% 数学楼层((数学.随机（）) *10)== 0)&&（y=>）{对于（var i=0；i<ok.width；i++）{如果（i%25==0）{ctx.globalAlpha=数学随机（）ctx.fillStyle=(“rgb（”+数学random（）*255+“，”+数学random（）*255+“，”+数学random（）*255+“）”);（wdth=>ctx.fill矩形(数学.sin(i*数学.PI/180) * 数学.随机（）*ok宽度，数学科(i*数学PI/180，)*wdth+y，wdth中，世界贸易组织))(15)}}})（k）ok。toBlob（blob=>{k.src=URL.createObjectURL（blob）})<img id=k>

或者，如果您想使用低级字节数据，可以获取画布的原始字节，然后根据文件规范将原始图像数据写入数据的必要字节。您只需要调用ctx.getImageData（0，0，ctx.canvas.widht，ctx.画布.height）来获取原始图像数据，然后根据文件规范将其写入

如果您正在使用jQuery（很多人都这么做），那么您可以这样实现接受的答案：

var canvas = $("#mycanvas")[0];
var img = canvas.toDataURL("image/png");

$("#elememt-to-write-to").html('<img src="'+img+'"/>');