update

Author: javaLuo

README.md

@@ -125,6 +125,8 @@ export default {
 - 模态框的显示和隐藏完全由父级控制，所以用户通过验证后，需要手动隐藏模态框
 
 ### 更新日志
+2021/10/13 - 1.1.8<br/>
+- 修复：解决了一个在safari中无法显示拼图块的问题（safari drawImage看起来像是异步操作）
 
 2021/10/12 - 1.1.7<br/>
 - 修复：重复加载图片的问题

README3.md

@@ -105,6 +105,9 @@ export default {
 - 模态框的显示和隐藏完全由父级控制，所以用户通过验证后，需要手动隐藏模态框
 
 ### 更新日志
+2021/10/13 - 1.0.3<br/>
+- 修复：解决了一个在safari中无法显示拼图块的问题（safari drawImage看起来像是异步操作）
+- 
 2021/10/12 - 1.0.2<br/>
 - 修复：删除了一个无用的ref变量引用，这个引用可能导致在vue3.2.19及以下的版本中出现问题
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-puzzle-vcode",
-  "version": "1.1.7",
+  "version": "1.1.8",
   "description": "vue 滑动拼图验证码",
   "main": "dist/main.js",
   "files": [

src/app.vue

@@ -321,8 +321,16 @@ export default {
         ctx.fill();
 
         // 将小图赋值给ctx2
-        ctx2.drawImage(c, this.pinX - 3,this.pinY - 20,this.pinX + this.puzzleBaseSize + 5,this.pinY + this.puzzleBaseSize + 5, 
-        0, this.pinY - 20, this.pinX + this.puzzleBaseSize + 5, this.pinY + this.puzzleBaseSize + 5);
+        const imgData = ctx.getImageData(
+          this.pinX - 3, // 为了阴影 是从-3px开始截取，判定的时候要+3px
+          this.pinY - 20,
+          this.pinX + this.puzzleBaseSize + 5,
+          this.pinY + this.puzzleBaseSize + 5
+        );
+        ctx2.putImageData(imgData, 0, this.pinY - 20);
+        
+        // ctx2.drawImage(c, this.pinX - 3,this.pinY - 20,this.pinX + this.puzzleBaseSize + 5,this.pinY + this.puzzleBaseSize + 5, 
+        // 0, this.pinY - 20, this.pinX + this.puzzleBaseSize + 5, this.pinY + this.puzzleBaseSize + 5);
 
         // 清理
         ctx.restore();