{"id":6472,"date":"2024-03-14T04:18:42","date_gmt":"2024-03-14T04:18:42","guid":{"rendered":"https:\/\/www.silicloud.com\/blog\/how-to-use-the-canvas-drawimage-method-to-achieve-image-compression\/"},"modified":"2025-08-02T04:04:28","modified_gmt":"2025-08-02T04:04:28","slug":"how-to-use-the-canvas-drawimage-method-to-achieve-image-compression","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/blog\/how-to-use-the-canvas-drawimage-method-to-achieve-image-compression\/","title":{"rendered":"Canvas Image Compression Guide"},"content":{"rendered":"<p>The use of the drawImage method in Canvas can be used to compress images. Below is a simple example code:<\/p>\n<pre class=\"post-pre\"><code><span class=\"hljs-comment\">\/\/ \u83b7\u53d6\u539f\u59cb\u7684\u56fe\u7247\u5bf9\u8c61<\/span>\r\n<span class=\"hljs-keyword\">var<\/span> img = <span class=\"hljs-keyword\">new<\/span> <span class=\"hljs-title class_\">Image<\/span>();\r\nimg.<span class=\"hljs-property\">src<\/span> = <span class=\"hljs-string\">'\u539f\u59cb\u56fe\u7247\u8def\u5f84'<\/span>;\r\n\r\n<span class=\"hljs-comment\">\/\/ \u521b\u5efa\u4e00\u4e2aCanvas\u5143\u7d20<\/span>\r\n<span class=\"hljs-keyword\">var<\/span> canvas = <span class=\"hljs-variable language_\">document<\/span>.<span class=\"hljs-title function_\">createElement<\/span>(<span class=\"hljs-string\">'canvas'<\/span>);\r\n<span class=\"hljs-keyword\">var<\/span> ctx = canvas.<span class=\"hljs-title function_\">getContext<\/span>(<span class=\"hljs-string\">'2d'<\/span>);\r\n\r\n<span class=\"hljs-comment\">\/\/ \u8bbe\u7f6eCanvas\u7684\u5927\u5c0f\u4e3a\u538b\u7f29\u540e\u7684\u5c3a\u5bf8<\/span>\r\n<span class=\"hljs-keyword\">var<\/span> maxWidth = <span class=\"hljs-number\">200<\/span>;\r\n<span class=\"hljs-keyword\">var<\/span> maxHeight = <span class=\"hljs-number\">200<\/span>;\r\n<span class=\"hljs-keyword\">var<\/span> ratio = <span class=\"hljs-number\">1<\/span>;\r\n<span class=\"hljs-keyword\">if<\/span> (img.<span class=\"hljs-property\">width<\/span> &gt; maxWidth || img.<span class=\"hljs-property\">height<\/span> &gt; maxHeight) {\r\n  ratio = <span class=\"hljs-title class_\">Math<\/span>.<span class=\"hljs-title function_\">min<\/span>(maxWidth \/ img.<span class=\"hljs-property\">width<\/span>, maxHeight \/ img.<span class=\"hljs-property\">height<\/span>);\r\n}\r\n\r\ncanvas.<span class=\"hljs-property\">width<\/span> = img.<span class=\"hljs-property\">width<\/span> * ratio;\r\ncanvas.<span class=\"hljs-property\">height<\/span> = img.<span class=\"hljs-property\">height<\/span> * ratio;\r\n\r\n<span class=\"hljs-comment\">\/\/ \u5728Canvas\u4e0a\u7ed8\u5236\u538b\u7f29\u540e\u7684\u56fe\u7247<\/span>\r\nctx.<span class=\"hljs-title function_\">drawImage<\/span>(img, <span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0<\/span>, img.<span class=\"hljs-property\">width<\/span>, img.<span class=\"hljs-property\">height<\/span>, <span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0<\/span>, canvas.<span class=\"hljs-property\">width<\/span>, canvas.<span class=\"hljs-property\">height<\/span>);\r\n\r\n<span class=\"hljs-comment\">\/\/ \u5c06Canvas\u8f6c\u6362\u4e3a\u538b\u7f29\u540e\u7684\u56fe\u7247\u6570\u636e<\/span>\r\n<span class=\"hljs-keyword\">var<\/span> compressedImage = canvas.<span class=\"hljs-title function_\">toDataURL<\/span>(<span class=\"hljs-string\">'image\/jpeg'<\/span>, <span class=\"hljs-number\">0.7<\/span>);\r\n\r\n<span class=\"hljs-comment\">\/\/ \u5c06\u538b\u7f29\u540e\u7684\u56fe\u7247\u663e\u793a\u5728\u9875\u9762\u4e0a<\/span>\r\n<span class=\"hljs-keyword\">var<\/span> compressedImgElement = <span class=\"hljs-variable language_\">document<\/span>.<span class=\"hljs-title function_\">createElement<\/span>(<span class=\"hljs-string\">'img'<\/span>);\r\ncompressedImgElement.<span class=\"hljs-property\">src<\/span> = compressedImage;\r\n<span class=\"hljs-variable language_\">document<\/span>.<span class=\"hljs-property\">body<\/span>.<span class=\"hljs-title function_\">appendChild<\/span>(compressedImgElement);\r\n<\/code><\/pre>\n<p>In the code above, an original image object is first created, followed by the creation of a Canvas element with a size set to the compressed dimensions. The drawImage method is then used to draw the compressed image on the Canvas, before converting the Canvas to compressed image data and displaying it on the page.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The use of the drawImage method in Canvas can be used to compress images. Below is a simple example code: \/\/ \u83b7\u53d6\u539f\u59cb\u7684\u56fe\u7247\u5bf9\u8c61 var img = new Image(); img.src = &#8216;\u539f\u59cb\u56fe\u7247\u8def\u5f84&#8217;; \/\/ \u521b\u5efa\u4e00\u4e2aCanvas\u5143\u7d20 var canvas = document.createElement(&#8216;canvas&#8217;); var ctx = canvas.getContext(&#8216;2d&#8217;); \/\/ \u8bbe\u7f6eCanvas\u7684\u5927\u5c0f\u4e3a\u538b\u7f29\u540e\u7684\u5c3a\u5bf8 var maxWidth = 200; var maxHeight = 200; var ratio = 1; if [&hellip;]<\/p>\n","protected":false},"author":12,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[1],"tags":[7840,7841,3601,324,326],"class_list":["post-6472","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-canvas","tag-drawimage","tag-image-compression","tag-javascript","tag-web-development"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.5 (Yoast SEO v21.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Canvas Image Compression Guide - Blog - Silicon Cloud<\/title>\n<meta name=\"description\" content=\"Learn how to compress images using Canvas drawImage method. Step-by-step guide with code examples for efficient image compression in JavaScript.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/blog\/how-to-use-the-canvas-drawimage-method-to-achieve-image-compression\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Canvas Image Compression Guide\" \/>\n<meta property=\"og:description\" content=\"Learn how to compress images using Canvas drawImage method. Step-by-step guide with code examples for efficient image compression in JavaScript.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/blog\/how-to-use-the-canvas-drawimage-method-to-achieve-image-compression\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-14T04:18:42+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-02T04:04:28+00:00\" \/>\n<meta name=\"author\" content=\"Liam\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:site\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Liam\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-use-the-canvas-drawimage-method-to-achieve-image-compression\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-use-the-canvas-drawimage-method-to-achieve-image-compression\/\"},\"author\":{\"name\":\"Liam\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/23786905eb7b377f45ddb01c17da7671\"},\"headline\":\"Canvas Image Compression Guide\",\"datePublished\":\"2024-03-14T04:18:42+00:00\",\"dateModified\":\"2025-08-02T04:04:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-use-the-canvas-drawimage-method-to-achieve-image-compression\/\"},\"wordCount\":79,\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"keywords\":[\"Canvas\",\"drawImage\",\"Image Compression\",\"JavaScript\",\"web development\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-use-the-canvas-drawimage-method-to-achieve-image-compression\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/how-to-use-the-canvas-drawimage-method-to-achieve-image-compression\/\",\"name\":\"Canvas Image Compression Guide - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\"},\"datePublished\":\"2024-03-14T04:18:42+00:00\",\"dateModified\":\"2025-08-02T04:04:28+00:00\",\"description\":\"Learn how to compress images using Canvas drawImage method. Step-by-step guide with code examples for efficient image compression in JavaScript.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-use-the-canvas-drawimage-method-to-achieve-image-compression\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/blog\/how-to-use-the-canvas-drawimage-method-to-achieve-image-compression\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-use-the-canvas-drawimage-method-to-achieve-image-compression\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.silicloud.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Canvas Image Compression Guide\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"name\":\"Silicon Cloud Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\",\"name\":\"Silicon Cloud Blog\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"contentUrl\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"width\":1024,\"height\":1024,\"caption\":\"Silicon Cloud Blog\"},\"image\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\",\"https:\/\/twitter.com\/SiliCloudGlobal\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/23786905eb7b377f45ddb01c17da7671\",\"name\":\"Liam\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/8d37ed3e7f770dde8bf069ba0b4298688028c3abaacf1131742fc1352d174ebd?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/8d37ed3e7f770dde8bf069ba0b4298688028c3abaacf1131742fc1352d174ebd?s=96&d=mm&r=g\",\"caption\":\"Liam\"},\"sameAs\":[\"http:\/\/Wilson\"],\"url\":\"https:\/\/www.silicloud.com\/blog\/author\/liamwilson\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Canvas Image Compression Guide - Blog - Silicon Cloud","description":"Learn how to compress images using Canvas drawImage method. Step-by-step guide with code examples for efficient image compression in JavaScript.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.silicloud.com\/blog\/how-to-use-the-canvas-drawimage-method-to-achieve-image-compression\/","og_locale":"en_US","og_type":"article","og_title":"Canvas Image Compression Guide","og_description":"Learn how to compress images using Canvas drawImage method. Step-by-step guide with code examples for efficient image compression in JavaScript.","og_url":"https:\/\/www.silicloud.com\/blog\/how-to-use-the-canvas-drawimage-method-to-achieve-image-compression\/","og_site_name":"Blog - Silicon Cloud","article_publisher":"https:\/\/www.facebook.com\/SiliCloudGlobal\/","article_published_time":"2024-03-14T04:18:42+00:00","article_modified_time":"2025-08-02T04:04:28+00:00","author":"Liam","twitter_card":"summary_large_image","twitter_creator":"@SiliCloudGlobal","twitter_site":"@SiliCloudGlobal","twitter_misc":{"Written by":"Liam","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.silicloud.com\/blog\/how-to-use-the-canvas-drawimage-method-to-achieve-image-compression\/#article","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-use-the-canvas-drawimage-method-to-achieve-image-compression\/"},"author":{"name":"Liam","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/23786905eb7b377f45ddb01c17da7671"},"headline":"Canvas Image Compression Guide","datePublished":"2024-03-14T04:18:42+00:00","dateModified":"2025-08-02T04:04:28+00:00","mainEntityOfPage":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-use-the-canvas-drawimage-method-to-achieve-image-compression\/"},"wordCount":79,"publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"keywords":["Canvas","drawImage","Image Compression","JavaScript","web development"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/blog\/how-to-use-the-canvas-drawimage-method-to-achieve-image-compression\/","url":"https:\/\/www.silicloud.com\/blog\/how-to-use-the-canvas-drawimage-method-to-achieve-image-compression\/","name":"Canvas Image Compression Guide - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/#website"},"datePublished":"2024-03-14T04:18:42+00:00","dateModified":"2025-08-02T04:04:28+00:00","description":"Learn how to compress images using Canvas drawImage method. Step-by-step guide with code examples for efficient image compression in JavaScript.","breadcrumb":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-use-the-canvas-drawimage-method-to-achieve-image-compression\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/blog\/how-to-use-the-canvas-drawimage-method-to-achieve-image-compression\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/blog\/how-to-use-the-canvas-drawimage-method-to-achieve-image-compression\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.silicloud.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Canvas Image Compression Guide"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/blog\/#website","url":"https:\/\/www.silicloud.com\/blog\/","name":"Silicon Cloud Blog","description":"","publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.silicloud.com\/blog\/#organization","name":"Silicon Cloud Blog","url":"https:\/\/www.silicloud.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","contentUrl":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","width":1024,"height":1024,"caption":"Silicon Cloud Blog"},"image":{"@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/SiliCloudGlobal\/","https:\/\/twitter.com\/SiliCloudGlobal"]},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/23786905eb7b377f45ddb01c17da7671","name":"Liam","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/8d37ed3e7f770dde8bf069ba0b4298688028c3abaacf1131742fc1352d174ebd?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8d37ed3e7f770dde8bf069ba0b4298688028c3abaacf1131742fc1352d174ebd?s=96&d=mm&r=g","caption":"Liam"},"sameAs":["http:\/\/Wilson"],"url":"https:\/\/www.silicloud.com\/blog\/author\/liamwilson\/"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/6472","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/comments?post=6472"}],"version-history":[{"count":2,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/6472\/revisions"}],"predecessor-version":[{"id":151233,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/6472\/revisions\/151233"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/media?parent=6472"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/categories?post=6472"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/tags?post=6472"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}