Refactoring

resources/js/components/IndexField.vue

@@ -1,35 +1,34 @@
 <template>
     <span>
-    	<vue-qr
-            class="qr-item"
-            :text="this.field.value"
-            :size="this.field.indexSize"
-            :bgSrc="this.field.background"
-            :logoSrc="this.field.logo"
-            :margin="this.field.margin"
-        ></vue-qr>
+        <div ref="qrContainer" class="qr-item"></div>
     </span>
 </template>
 
 <script>
-import VueQr from 'vue-qr/src/packages/vue-qr.vue'
+import { AwesomeQR } from 'awesome-qr';
+
 export default {
     props: [
-    	'resourceName',
-    	'field'
+        'resourceName',
+        'field'
     ],
-    components: {
-        VueQr
-    }
-}
-</script>
+    mounted() {
+        this.generateQRCode();
+    },
+    methods: {
+        async generateQRCode() {
+            const qrCode = new AwesomeQR({
+                text: this.field.value,
+                size: this.field.indexSize,
+                margin: this.field.indexSize > 250 ? this.field.margin : 1,
+                backgroundImage: this.field.background || null,
+                logoImage: this.field.logo || null,
+                logoMargin: this.field.indexSize > 250 ? 10 : 0,
+            });
 
-<style>
-.qr-item{
-	margin-top: 5px;
-}
-.qr-item img{
-    border: solid thin #ddd;
-    padding: 2px;
+            const qrCodeImage = await qrCode.draw();
+            this.$refs.qrContainer.innerHTML = `<img src="${qrCodeImage}" alt="${this.field.value}" />`;
+        }
+    }
 }
-</style>
+</script>

src/Qrcode.php

@@ -15,56 +15,89 @@ class Qrcode extends Field
     public $component = 'qrcode';
 
     /**
+     * Constructor for the Qrcode field.
+     *
      * @param  mixed  ...$attributes
      */
     public function __construct(...$attributes)
     {
         parent::__construct(...$attributes);
 
-        $this
-            ->exceptOnForms()
-            ->margin(0)
-            ->indexSize(50)
-            ->detailSize(200);
+        $this->exceptOnForms()
+            ->margin(5)
+            ->indexSize(100)
+            ->detailSize(300);
     }
 
-    public function background($background = null)
+    /**
+     * Set the background image for the QR code.
+     *
+     * @return $this
+     */
+    public function background(?string $background = null)
     {
-        return $this->withMeta(['background' => $this->_renderImage($background)]);
+        return $this->withMeta(['background' => $this->renderImage($background)]);
     }
 
-    public function logo($logo = null)
+    /**
+     * Set the logo image for the QR code.
+     *
+     * @return $this
+     */
+    public function logo(?string $logo = null)
     {
-        return $this->withMeta(['logo' => $this->_renderImage($logo)]);
+        return $this->withMeta(['logo' => $this->renderImage($logo)]);
     }
 
+    /**
+     * Set the size of the QR code for index view.
+     *
+     * @return $this
+     */
     public function indexSize(int $size)
     {
         return $this->withMeta(['indexSize' => $size]);
     }
 
+    /**
+     * Set the size of the QR code for detail view.
+     *
+     * @return $this
+     */
     public function detailSize(int $size)
     {
         return $this->withMeta(['detailSize' => $size]);
     }
 
+    /**
+     * Set the margin for the QR code.
+     *
+     * @return $this
+     */
     public function margin(int $size)
     {
         return $this->withMeta(['margin' => $size]);
     }
 
-    protected function _renderImage($url = null)
+    /**
+     * Render the image as a base64 encoded data URI.
+     *
+     * @return string|false
+     */
+    protected function renderImage(?string $url = null)
     {
-        if ($url and curl_init($url)) {
-            $image = Cache::rememberForever('qr-img-'.md5($url), function () use ($url) {
-                $image = file_get_contents($url);
-                $file_info = new \finfo(FILEINFO_MIME_TYPE);
-                $mime_type = $file_info->buffer($image);
+        if ($url && filter_var($url, FILTER_VALIDATE_URL)) {
+            return Cache::rememberForever('qr-img-'.md5($url), function () use ($url) {
+                $image = @file_get_contents($url);
+                if ($image === false) {
+                    return false;
+                }
 
-                return 'data: '.$mime_type.';base64,'.base64_encode(file_get_contents($url));
-            });
+                $fileInfo = new \finfo(FILEINFO_MIME_TYPE);
+                $mimeType = $fileInfo->buffer($image);
 
-            return $image;
+                return 'data:'.$mimeType.';base64,'.base64_encode($image);
+            });
         }
 
         return false;