在客户端

Question

使用brunobar79在此question中的解决方案。我的问题是我收到以下错误;

  

未捕获的TypeError：无法执行＆＃39; drawImage＆＃39;上   ＆＃39; CanvasRenderingContext2D＆＃39;：提供的值不是类型   ＆＃39;（CSSImageValue或HTMLImageElement或SVGImageElement或   HTMLVideoElement或HTMLCanvasElement或ImageBitmap或   OffscreenCanvas）＆＃39;

我的JS;

<script type="text/javascript">
var jic = {
        compress: function(source_img_obj, quality, output_format){

             var mime_type = "image/jpeg";
             if(typeof output_format !== "undefined" && output_format=="png"){
                mime_type = "image/png";
             };

             var cvs = document.createElement('canvas');
             cvs.width = source_img_obj.naturalWidth;
             cvs.height = source_img_obj.naturalHeight;
             var ctx = cvs.getContext("2d").drawImage(source_img_obj, 0, 0);
             var newImageData = cvs.toDataURL(mime_type, quality/100);
             var result_image_obj = new Image();
             result_image_obj.src = newImageData;
             return result_image_obj;
        },
}
function myFunction(){
    var source_img = document.getElementById("source_img"),
        target_img = document.getElementById("target_img");
    var quality =  80,
    output_format = 'jpg';
    target_img.src = jic.compress(source_img,quality,output_format).src;
    console.log("I am a myFunction!");
};
</script>

我的HTML片段;

<form>   <img src="" id="target_img"> </form>
<button onclick="myFunction()" >compress</button>

另一位开发人员添加了HTML / Python代码，因此不确定从中添加什么。 <form>已将source_img定义为其中的ID。

客户端的要求是，当一个图像被选中后，应该被压缩，然后在点击压缩按钮后放入<img>。这是我第一次使用JS进行图像压缩在客户端，我是JS的新手。请指教。