lsl
/
xzjl-ui
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'main'
${ noResults }
xzjl-ui/node_modules/wxml2canvas/pages/wxml/index.wxml

84 lines
23 KiB
Raw Permalink Blame History Escape

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<view class="share">
<view class="share__title">Wxml:</view>
<view class="share__canvas share__canvas1">
<view class="share__canvas1-text draw_canvas" data-type="text" data-text="这是一段无边距文字">这是一段无边距文字</view>
<view class="share__canvas1-text-2 draw_canvas" data-type="text" data-text="这是一段margin文字">这是一段margin文字</view>
<view class="share__canvas1-text-3 draw_canvas" data-type="text" data-text="这是一段padding文字">这是一段padding文字</view>
<view class="share__canvas1-text-4 draw_canvas" data-type="text" data-text="这是一段居中有背景文字">这是一段居中有背景文字</view>
<view class="share__canvas1-text-5 draw_canvas" data-type="text" data-text="这是一段背景文字" data-background="rgba(255, 0, 0, 0.4)" data-padding="0 0 0 0">这是一段背景文字</view>
</view>
<view class="share__title">Canvas:</view>
<canvas canvas-id="canvas1" class="share__canvas"></canvas>
<view class="share__title">Wxml:</view>
<view class="share__canvas share__canvas2">
<image class="share__canvas2-image draw_canvas" data-type="image" data-url="https://mmocgame.qpic.cn/wechatgame/duc2TvpEgSQCEa0WicosqlEgJiacYLaTLEDFB8Kq9Hr7LjAVhM8wu8TT77KqNezQnH/0" src="https://mmocgame.qpic.cn/wechatgame/duc2TvpEgSQCEa0WicosqlEgJiacYLaTLEDFB8Kq9Hr7LjAVhM8wu8TT77KqNezQnH/0"></image>
<image class="share__canvas2-image-2 draw_canvas" data-type="radius-image" data-url="./img/demo.png" src="./img/demo.png"></image>
<view class="share__canvas2-image-3 draw_canvas" style="background-image: url(https://mmocgame.qpic.cn/wechatgame/duc2TvpEgSQCEa0WicosqlEgJiacYLaTLEDFB8Kq9Hr7LjAVhM8wu8TT77KqNezQnH/0);" data-type="background-image"></view>
<view class="share__canvas2-image-4 draw_canvas" data-type="background-image" data-base64="1"></view>
<image class="share__canvas2-image-3 draw_canvas" data-type="image" data-base64="1" mode="widthFix"
data-url="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIkAAAApCAYAAAABOAonAAAEGWlDQ1BrQ0dDb2xvclNwYWNlR2VuZXJpY1JHQgAAOI2NVV1oHFUUPrtzZyMkzlNsNIV0qD8NJQ2TVjShtLp/3d02bpZJNtoi6GT27s6Yyc44M7v9oU9FUHwx6psUxL+3gCAo9Q/bPrQvlQol2tQgKD60+INQ6Ium65k7M5lpurHeZe58853vnnvuuWfvBei5qliWkRQBFpquLRcy4nOHj4g9K5CEh6AXBqFXUR0rXalMAjZPC3e1W99Dwntf2dXd/p+tt0YdFSBxH2Kz5qgLiI8B8KdVy3YBevqRHz/qWh72Yui3MUDEL3q44WPXw3M+fo1pZuQs4tOIBVVTaoiXEI/MxfhGDPsxsNZfoE1q66ro5aJim3XdoLFw72H+n23BaIXzbcOnz5mfPoTvYVz7KzUl5+FRxEuqkp9G/Ajia219thzg25abkRE/BpDc3pqvphHvRFys2weqvp+krbWKIX7nhDbzLOItiM8358pTwdirqpPFnMF2xLc1WvLyOwTAibpbmvHHcvttU57y5+XqNZrLe3lE/Pq8eUj2fXKfOe3pfOjzhJYtB/yll5SDFcSDiH+hRkH25+L+sdxKEAMZahrlSX8ukqMOWy/jXW2m6M9LDBc31B9LFuv6gVKg/0Szi3KAr1kGq1GMjU/aLbnq6/lRxc4XfJ98hTargX++DbMJBSiYMIe9Ck1YAxFkKEAG3xbYaKmDDgYyFK0UGYpfoWYXG+fAPPI6tJnNwb7ClP7IyF+D+bjOtCpkhz6CFrIa/I6sFtNl8auFXGMTP34sNwI/JhkgEtmDz14ySfaRcTIBInmKPE32kxyyE2Tv+thKbEVePDfW/byMM1Kmm0XdObS7oGD/MypMXFPXrCwOtoYjyyn7BV29/MZfsVzpLDdRtuIZnbpXzvlf+ev8MvYr/Gqk4H/kV/G3csdazLuyTMPsbFhzd1UabQbjFvDRmcWJxR3zcfHkVw9GfpbJmeev9F08WW8uDkaslwX6avlWGU6NRKz0g/SHtCy9J30o/ca9zX3Kfc19zn3BXQKRO8ud477hLnAfc1/G9mrzGlrfexZ5GLdn6ZZrrEohI2wVHhZywjbhUWEy8icMCGNCUdiBlq3r+xafL549HQ5jH+an+1y+LlYBifuxAvRN/lVVVOlwlCkdVm9NOL5BE4wkQ2SMlDZU97hX86EilU/lUmkQUztTE6mx1EEPh7OmdqBtAvv8HdWpbrJS6tJj3n0CWdM6busNzRV3S9KTYhqvNiqWmuroiKgYhshMjmhTh9ptWhsF7970j/SbMrsPE1suR5z7DMC+P/Hs+y7ijrQAlhyAgccjbhjPygfeBTjzhNqy28EdkUh8C+DU9+z2v/oyeH791OncxHOs5y2AtTc7nb/f73TWPkD/qwBnjX8BoJ98VQNcC+8AABAjSURBVHgB7Zp5cFVVEsb7JWEJErYAQRRIIOwqm7KJEFlKwUJZxik3cIZlWHQstFz+sLQsLbAGF2DEYQcd0ClhWEoQNxI2FYjIIouCAmEHlUVlSyC5079+OfEmvOSVVrSceE/Vfe/dc/uc06f766/73CTkaZOgBRYowQIxJTwLHgUWMAsEIAmAENUCAUiimigQCEASYCCqBQKQRDVRIBCAJMBAVAsEIIlqokAgAEmAgagWCEAS1USBQACSAANRLRCAJKqJAoEAJAEGolqgzIGEP1fm5UX4myUPIv0ts7h+NR1/+4z0989IfVEt/X8sENINR7Bo9B0xLBQKRRf8DSXOnz8va9assatRo0Zy++23S82aNc3RP1fX3+P+fkNTFloqrtCd3pw9e1amTp0mu3fvkmuvvVYGDx4sVapUKTD0oUOHZN68ebJnzx5p27at3HXXXVK9evWCaY4ePSpvvfWWfPXVV9KvX3/p1atnwbNf64dzKLovW7ZM9Z8qHTt2lDZt2oRBoguHDh8WWbVavG07RC7lKE1oZ7VqEkrrJtK5o0jsT6Zw8506dUpWrEiX9evXyYULF5Sh8iQhIUFuuukm6datm9nl19rT72peNUihduLECe+WW27BhF7Tpk29zMxMe37p0iX7fvvtt7369evb88aNG3ubNm2y/tzcXPteuXKlp1Fsz8eOG2t9alzPPbeO/A/6uVxDxn/vxvn7kEXOL+ueHz9+3Bs6dKitff3113sbNmywqXP3ZXl5fx/j5SalepeknF4SvmITvNxOvTxv6TKngqcKeGikIPceeughLzU11ebDHu5q0qSJN2PGDE+BUzDO6VpUtwIB/eFknL7u3r8XJ++euXv/dyR5t26kZ/6xbt5ocv4xl9Uk8fHxFoEVKlSQ77//Xvbu3WsR5Oh6y5at8s033xjQjxw5Itu3bxdd0O75OKwR+91330mdOnUkJTnF+hkbE3PZUpau3LwIIsO9KlhonOtz/cg5WRPM//Cv42Ts0eYt4i1epshQPTt3EWmrV3xdkdxs8dZliPef+SLHj4dn0fVPK4NMnDhRpk+fLl9//bUoUOSee+6RYcOGSVpamhw8eFA+/PBDOXnypOpKDZRners1nW5OX6ej08/tx91HknfP3Fj/t5Onz61RdG2/vPuNrJvXP4d7Xtz3TxyrEkxSvnx5ad68uQAWQKJMIf3797f+nJwcycrKMuplwosXL8qWLVss91etWlXOnTsnX375pfzwww82hzKRnDlzxsZcccUVUq9ePYmLCy+ZnZ1tgELZunXrSmxsrPrpuMSVi5OaiTUNeAAUmk9KSrKLNZXR5PCRw3Lq5CmpVauWXHnllREBiKwzYKhuHQkNGyzSuLFISop4OdkSWrJUcv85VT18Rrw9+yV04KDoIuZwZUtZuHChrX3DDTfI448/Lp06dRIC58CBA7J8+XLNVNXMJoopAwqB8+2337Ks7YUgQcbfsAs2rV27ts2lrG02qFixolx11VWCjWjsmWBjPfaHbVzD5qyF3ZiHZwQpwMXWNOa5+uqrpVy5cm6YfQOQ06dPCyUBY5DTrFBo/kID8m8KgYQ+Fr3mmmtMuS+++EJrk92SnZ1jBtm3b5/s359lQwERC2E0NgVIUGD//v3mHDaH899//32LSOZ94oknLJcTee+9955FK0Cin3piwoQJkpiYaHXOu+++q/XACl072zZMFLdu3drqIeb88ccfDSRDhgyRW2+91QxqikX48Fq1klDTZiJVEqArsXI756LI5FkKEh0QpgMbybxLly41wOLkESNGyMCBAy0CEaAQ1nQjORdzpGqVaia3ePFi2w8gwRFcyAwfPtxqI8bh3Llz50lGRrr1V6pUSWbOnGlMhTPbt29va8FaGRkZVlcBnmeeeUZatGjBFNbS09Pl1VdflQYNGoimQ6FYX7jwv1o3bTAbIsTcN998swwaNMgCkz4CJj09Q3X4t2UHfEd9NWDAQK07BxkpIBepFQIJm6M5BwMS0E4Bl5BQWQAJhWtycrIpCYtAx4CDaMdI3MNGAI1Ihzl27txp40B+K3UYgJg1a5asWrXKNgHAPv/8c6NwNrN582ZjKNZlMzRYhhMLhamLWPqPHTtmUag1CLcRW6h8BRE1eAEYFChqXZXNT2vVEsSrUd3AA+jZA3oA2C5dupjTXUqhv3LlyrYOfbDKCy+8YHrAHjRY4JNPPjG7Pfvss2YLQPLRRx/JO++8Y0yLzdgzc8COn376qUU2rMWekIWZO3fubPuGVWAi1sMGN954o83/2muvyeuvv24O5wABm7D+xo0bzc5PPvmkgWb9+vUybtw4PfmttuBFNkuzAr7o0aO7pVT25jBgG8n/uKxQUDlTtmXLlsYq1B07d243cQBCvcGpp3v37mYsjAp4aCgH8xCBOBT24CTQo0cPAwt5HGBgAI6qWvjKvffeKzVq1DAwEFFQ4ccff2xjXnrpJT0d9TLFMfqiRYukXbt2xjgDBgxQv1eUrVu3mkMwdKQNmmL+DwCibOFlbtSaRE85sZUl1LqVKO+aFA7CGczVrFmzgpThcjjfNAyKg9kjDnvxxRdlzpw5Mnv2bBk9erQxG0zIXpw8MQjo165da2nnqaeekqeffloaNmxojIA8AO3QoYOlAdI7tkIfGukX59M4uSUnp5h+MMaUKVNs/VdeecV8AwixN/PRYKDMzA1WBjhdGcPp1aU5E4zwUYhJeM5GiBQUJdrJoVlZ+y2lUKRSrJHvMMz8+fMtqmEK6I28SPSTFkgjNABw//33myPZ5MsvTzDjYgCAxjw0nOIM36dPH8GALVq2MFbTE5YZiqgeO3assRF0DuOwJkAmLRUHEvgizJH6gyjQqPIWLNbf5yWmdSeRAf3E00hFBrA555OvieBIjbUACKkuLS3N2Ix7GukX21A7YA/XGANIYE4i/O677xbsgEMplEnVXHq6NPbZtm2bsQ0RDytjP149EIQwclJSbRk1apQxBWmQBmORAUhZpE6CmkZaYm10QBYf8QoDeQf84ux3GUiYkEEUr9QUMAVKAhainIlwEEgmxQAQnAXLENUYGBAhQ8Mn7dt3kL59+8q0adPsnQMy5N4777yzgLrDsp6tzTsOxmt212hurlFVT/U4aM7AODSondzLXNCyS0v2sLgP1V327hFv/ETxdu+QUO364YK2XRvRt4oWIQDVXQCG38U1bEEKxcmwgKvHsAlOwY7o52/MRxpLU2CRlrmaNGlqNQHgYhx9pBlSC0AjOPEH6Qmnw6akcxq2BjyAgtIAO3z22Wf2DP3c+i79A6BHHnnEArR3797K9F0vK3BtsO8jIkh4DnJhA16KQVlcRCwv1lCMaMCR0CnRTJ0AUIg8Ci33gg2jxMdXtMLsjTfesNqC+WEY0k1xLTc3T5UXTVOxOr6SRS3Gc43NOwfqmw3XHfHbAABPHDsq3j+UyTJWSqhKosSM+KvIn//EImE062hSGHUUxmbvOM3txU3OulyAgFpi0qRJSuWZJosM7ECKcMzixvGN47ic7uG+y/spZAlCmANGIXBcDUMaxDfY4M0337SDAcHsAsWdcvzrkLZ37dpl2YF52BvpaMiQoTJy5EjzEToxpmgLJ9iivXpPyiHaaQCA3AijpKSkWLGJAdq0bWMRAEhAL8VlzZqJBhKnYExMSIujc4Z0DIcTMC5jVq9eXchYtph+hNEfjmAUd4AI94el6HeGhnFKbLG6TS3QvEn/kty5C3RzCcogfxEZ/TdFayILFoCEoyiBQCNCYQcaDtD3bLqm3ZoxcQYpecGCBVYwUl9RxHIiIiU4/cIjfvos2l/0HsmUlIbGHqwLQ3PB2JxIYFOAy8GBuoIah8B97LHH5Pnnn7cUyBz+eUkxDz74oOhLQHnggQcMgDDUzJkzbDyyfnnGuxYRJAhjKHIWRQ0OXaUFJ04GOLzvoKU2SjUwQYEcG0Fq9eo17OTDc9iAudauXWNHYSKUPEwkUORiXArFoi0SmpEprj8aRjytV2TOXMmbMVdCedkSM2SwhEYNF1FdNVeJZF/Q/rD32Rv7RldAz8nh6NGwjp4y1kU9+sIa+jbXUuCmTZuNOaitHn74YTu+U5+RCovTt7h+vx2q6HGdlAMzE/Wcikg96Ee6oQEaGB4ZgMmR+L777rPnrOF3OuwGe1NDceJ67rnnrN5jfHr6igIW8uvgfkdMNyzA1Si1kU1MGiHfcVyimHNFUmpqY6vM161bZ0ajbunatatFAAvEagQDLP6WwxwYEhQznpduVOoffPCBFbZ+w/k3xzz+Z9zTnI789sv7f/PM2qrVkjd9tsiJQ8oi+ge/4/rGeMpMUCyeAjlUPk5CffuIp3/Hwbm8FyHHw5zoTrFOMUn0QtU4jCM372gcO1NPUJucP3+h4D1LRF2cThG+/fKc9HiBh2OpBXlvRO3FSYjTJc3PsAQqoMbpvINiLmcjfhPEFLIAj1IBYPGc76LptKhqEUHihJJqJ1nqgEmogqFQCihXG7AYoKEuwUD0wzRszG0YEHD8Ij3dcccdBe9JeAHFhjgFEHnIhyk9XF/orTUMwdpcFJKuIc/F8zx1NM3d89sZ0Pr1WC5a+CoqRM7o8XfRctE/pOiAfICFciUuXo3GSatcnB3beXk3efJki94lS5ZYasRxOApjc/ojNcGKpAJSJ+CiERjYgqBCbxr7cYUwfejqGvumj/nR2zVeI5BaKGAJUlidWgX70ihGSTOUA+PHjzfWo4YC1K6ucutQLmBrfMY6+AtgccrhNIm8k3Xru+8SQcJLtdtuu83yMvkXmnNUx2YqVYq3KpncyFEPhTnWUnOAUihuxw49Rejvnj17Fihz3XXXWdohP2JwWIbTCm8R2UD9+g3UyFq1anOvjtm8e1lFP4aicGZ8cnKyjWNdaiZOZYDVMV6oYYpI01TxDugLtTiK33wHqV6hPAVOnK5Vq7ZSXzj7kvcp5piDdzMwHuuwH9YE1Pz1G/uMGTPGjEsgUDyiIwAj+nkzjAyN/eB0gMXJ0P9uggKVYOOwgA1pOIw99uvXz+wP8AhQ7Ig9qY+Y59FHH7W6hFML76tgOHTnTwuAD1Agz0mGoNywIVP3kW21YZ8+vTVNjRTeibEecpFaif9PwkBQ6ZgEWiInQlE0npNiKO4wIFSdrA5zBgBIGI5cyrEPEDjEgn7GMZcDB4Ui81C0VasW3hz3bJ6oZG4XRfRnaTrAeBiWoygNygV0yKGrsZ46WDfBCwzO95qrTFQ/9IfuwfpwpjrJ34h8nM2cBAm6sw8c74yPPOuhC0AGmIALecaiA87HVpwO6cOOzhaMJ8DYI0U9e8SONMYQ8diQ/VInMg4510hzrM3cNMAGEBkDO5GemI/f1IEHDx5SNjxrtSR2Qz+Cq6RWIkhKGvhHeIaTiouuP8L+3R5LhpCT+oN+/xKAAKyy1gKQlLJHfwmwSlmFUp8uAEmpm7TsTRiApOz5tNR3FICk1E1a9iYMQFL2fFrqOwpAUuomLXsTBiApez4t9R0FICl1k5a9Cf8HOwekO+S1S2IAAAAASUVORK5CYII="
src="data:image/png;base64,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"></image>
</view>
<view class="share__title">Canvas: </view>
<canvas canvas-id="canvas2" class="share__canvas"></canvas>
<view class="share__title">Wxml:</view>
<view class="share__canvas share__canvas3">
<view class="share__canvas3-inline draw_canvas" data-type="inline-text" data-text="这是一段行内文字">这是一段行内文字</view>
<view class="share__canvas3-inline share__canvas3-inline_bold draw_canvas" data-type="inline-text" data-text="这是一段加粗行内文字试试">这是一段加粗行内文字试试</view>
<view class="share__canvas3-inline draw_canvas" style="color: red" data-type="inline-text" data-text="这是一段换行文字">这是一段换行文字</view>
<view class="share__canvas3-inline draw_canvas" data-type="inline-text" data-text="这是一段很长很长很长很长很长很长很长很长很长很长很长很长的换行文字">这是一段很长很长很长很长很长很长很长很长很长很长很长很长的换行文字</view>
<view class="share__canvas3-inline draw_canvas" data-type="inline-text" data-text="这是一段换行文字">这是一段换行文字</view>
<view class="share__canvas3-inline draw_canvas" style="color: blue" data-type="inline-text" data-text="这是一段换了行的结束文字">这是一段换了行的结束文字</view>
<image src="./img/emoji.png" class="share__canvas-emoji draw_canvas" data-type="inline-image" data-url="./img/emoji.png"></image>
<image src="./img/emoji.png" class="share__canvas-emoji draw_canvas" data-type="inline-image" data-url="./img/emoji.png"></image>
<image src="./img/emoji.png" class="share__canvas-emoji draw_canvas" data-type="inline-image" data-url="./img/emoji.png"></image>
<view class="share__canvas3-inline draw_canvas" data-type="inline-text" data-text="这是一段行内文字这是一段行内文字">这是一段行内文字这是一段行内文字</view>
</view>
<view class="share__title">Canvas: </view>
<canvas canvas-id="canvas3" class="share__canvas"></canvas>
<view class="share__title">Wxml:</view>
<view class="share__canvas share__canvas5">
<image class="share__canvas5-image draw_canvas" data-type="image" data-url="./img/demo.png" src="./img/demo.png"></image>
<view class="share__canvas5-text draw_canvas" data-type="text" data-text="这是一段无边距文字">这是一段无边距文字</view>
<view class="share__canvas5-text-2 draw_canvas" data-type="text" data-text="这是一段margin文字">这是一段margin文字</view>
</view>
<view class="share__title">Canvas:</view>
<canvas canvas-id="canvas5" class="share__canvas"></canvas>
<view class="share__title">Wxml:</view>
<view class="share__canvas share__canvas4">
<view class="share__canvas4-block draw_canvas" data-type="text" data-text="Wxml2Cavnas库，是一个生成小程序分享图的通用方案，提供了两种绘制方式：">Wxml2Cavnas库，是一个生成小程序分享图的通用方案，提供了两种绘制方式：</view>
<view class="share__canvas4-block draw_canvas" data-type="text" data-text="封装基础图形的绘制接口，包括矩形、圆形、线条、图片、圆角图片、纯文本等，使用时只需要声明元素类型并提供关键数据即可，不需要再关注canvas的具体绘制过程；">封装基础图形的绘制接口，包括矩形、圆形、线条、图片、圆角图片、纯文本等，使用时只需要声明元素类型并提供关键数据即可，不需要再关注canvas的具体绘制过程；</view>
<image src="./img/demo.png" class="share__canvas4-image draw_canvas" data-type="image" data-url="./img/demo.png"></image>
<view class="share__canvas4-block draw_canvas" data-type="text" data-text="wxml直接转换成canvas元素，使用时传入待绘制的wxml节点的class类名，并且声明绘制此节点的类型（图片、文字等），会自动读取此节点的computedStyle，利用这些数据完成元素的绘制。">wxml直接转换成canvas元素，使用时传入待绘制的wxml节点的class类名，并且声明绘制此节点的类型（图片、文字等），会自动读取此节点的computedStyle，利用这些数据完成元素的绘制。</view>
</view>
<view class="share__title">Canvas: </view>
<canvas canvas-id="canvas4" class="share__canvas share__canvas4"></canvas>
<view class="share__title">Wxml:</view>
<view class="share__canvas share__canvas6">
<image class="share__canvas6-image draw_canvas" data-type="image" data-url="./img/demo.png" src="./img/demo.png" mode="top left" data-mode="top left"></image>
<image class="share__canvas6-image draw_canvas" data-type="image" data-url="./img/demo.png" src="./img/demo.png" mode="top" data-mode="top"></image>
<image class="share__canvas6-image draw_canvas" data-type="image" data-url="./img/demo.png" src="./img/demo.png" mode="top right" data-mode="top right"></image>
<image class="share__canvas6-image draw_canvas" data-type="image" data-url="./img/demo.png" src="./img/demo.png" mode="left" data-mode="left"></image>
<image class="share__canvas6-image draw_canvas" data-type="image" data-url="./img/demo.png" src="./img/demo.png" mode="center" data-mode="center"></image>
<image class="share__canvas6-image draw_canvas" data-type="image" data-url="./img/demo.png" src="./img/demo.png" mode="right" data-mode="right"></image>
<image class="share__canvas6-image draw_canvas" data-type="image" data-url="./img/demo.png" src="./img/demo.png" mode="bottom left" data-mode="bottom left"></image>
<image class="share__canvas6-image draw_canvas" data-type="image" data-url="./img/demo.png" src="./img/demo.png" mode="bottom" data-mode="bottom"></image>
<image class="share__canvas6-image draw_canvas" data-type="image" data-url="./img/demo.png" src="./img/demo.png" mode="bottom right" data-mode="bottom right"></image>
<image class="share__canvas6-image-2 draw_canvas" data-type="image" data-url="./img/demo.png" src="./img/demo.png" mode="scaleToFill" data-mode="scaleToFill"></image>
<image class="share__canvas6-image-2 draw_canvas" data-type="image" data-url="./img/demo.png" src="./img/demo.png" mode="aspectFit" data-mode="aspectFit"></image>
<image class="share__canvas6-image-2 draw_canvas" data-type="image" data-url="./img/demo.png" src="./img/demo.png" mode="aspectFill" data-mode="aspectFill"></image>
<image class="share__canvas6-image-2 draw_canvas" data-type="image" data-url="./img/demo.png" src="./img/demo.png" mode="widthFix" data-mode="widthFix"></image>
</view>
<view class="share__title">Canvas: </view>
<canvas canvas-id="canvas6" class="share__canvas share__canvas6"></canvas>
<view class="share__title">Result:</view>
<block wx:for="{{ imgs }}" wx:for-item="img" wx:key="img" wx:for-index="idx">
<image src="{{ img }}" class="share__result-img {{ idx === 3 || idx === 5 ? 'share__result-img-4' : ''}}" mode="widthFix"></image>
<button data-index="{{ idx }}" catchtap="saveImage" class="share__button">保存图片</button>
</block>
</view>
Reference in new issue View Git Blame Copy Permalink