@live-change/image-frontend 0.9.25 → 0.9.27

package/front/src/imageResizer.js

@@ -1,7 +1,16 @@
 import pica from 'pica'
 
 const imageResizer = pica({
-  createCanvas: (w, h) => new OffscreenCanvas(w, h)
+  features    : ['js', 'wasm', 'ww'],
+  createCanvas: (w, h) => {
+/*    if(window.OffscreenCanvas) {
+      return new OffscreenCanvas(w, h)
+    }*/
+    const canvas = document.createElement('canvas')
+    canvas.width = w
+    canvas.height = h
+    return canvas
+  }
 })
 
 export default imageResizer

package/front/src/imageUploads.js

@@ -15,8 +15,8 @@ async function handleUpload(upload, options) {
 export function uploadImage(purpose, uploadable, options = {}) {
   const upload = new ImageUpload(purpose, uploadable, options)
   if(options.id) {
-    const existingIndex = imageUploads.value.findIndex(u => u.id == options.id)
-    if( existingIndex != -1 ) {
+    const existingIndex = imageUploads.value.findIndex(u => u.id === options.id)
+    if( existingIndex !== -1 ) {
       imageUploads.value[existingIndex].cancel()
       imageUploads.value[existingIndex] = upload
       handleUpload(upload, options)

package/front/src/imageUtils.js

@@ -13,22 +13,22 @@ function getOrientation(jpegData) {
   if(window.forceOrientation) return window.forceOrientation
 
   let view = new DataView(jpegData)
-  if (view.getUint16(0, false) != 0xFFD8) return undefined
+  if (view.getUint16(0, false) !== 0xFFD8) return undefined
   let length = view.byteLength, offset = 2
   while (offset < length) {
     let marker = view.getUint16(offset, false)
     offset += 2
-    if (marker == 0xFFE1) {
-      if (view.getUint32(offset += 2, false) != 0x45786966) return undefined
-      let little = view.getUint16(offset += 6, false) == 0x4949
+    if (marker === 0xFFE1) {
+      if (view.getUint32(offset += 2, false) !== 0x45786966) return undefined
+      let little = view.getUint16(offset += 6, false) === 0x4949
       offset += view.getUint32(offset + 4, little)
       let tags = view.getUint16(offset, little)
       offset += 2
       for (let i = 0; i < tags; i++)
-        if (view.getUint16(offset + (i * 12), little) == 0x0112)
+        if (view.getUint16(offset + (i * 12), little) === 0x0112)
           return (view.getUint16(offset + (i * 12) + 8, little))
     }
-    else if ((marker & 0xFF00) != 0xFF00) break;
+    else if ((marker & 0xFF00) !== 0xFF00) break;
     else offset += view.getUint16(offset, false)
   }
   return undefined
@@ -52,36 +52,45 @@ function loadImageUpload(file) {
     let img = document.createElement("img")
     let reader = new FileReader()
     reader.onload = async function(e) {
-      if(file.type == "image/jpeg") {
-        let headerReader = new FileReader()
-        headerReader.onload=function(he) {
-          let orientation = getOrientation(he.target.result)
+      try {
+       /* const arrayBuffer = event.target.result
+        const blob = new Blob([arrayBuffer], { type: file.type })
+        const objectURL = URL.createObjectURL(blob)
+        throw new Error("F"+file.type)*/
+        const objectURL = e.target.result
+        if(file.type === "image/jpeg") {
+          let headerReader = new FileReader()
+          headerReader.onload = function(he) {
+            let orientation = getOrientation(he.target.result)
+            img.onload = function(e) {
+              resolve({
+                image: img,
+                type: file.type,
+                orientation: orientation,
+                sizeSwap: orientation > 4,
+                width: orientation > 4 ? img.height : img.width,
+                height: orientation > 4 ? img.width : img.height
+              })
+            }
+            img.src = objectURL
+          }
+          headerReader.onerror = function(e) {
+            reject(e.target.error)
+          }
+          headerReader.readAsArrayBuffer(file.slice(0, 64 * 1024))
+        } else {
           img.onload = function(e) {
             resolve({
               image: img,
               type: file.type,
-              orientation: orientation,
-              sizeSwap: orientation>4,
-              width: orientation>4 ? img.height : img.width,
-              height: orientation>4 ? img.width : img.height
+              width: img.width,
+              height: img.height
             })
           }
-          img.src = e.target.result
-        }
-        headerReader.onerror = function(e) {
-          reject(e.target.error)
-        }
-        headerReader.readAsArrayBuffer(file.slice(0, 64 * 1024))
-      } else {
-        img.onload = function(e) {
-          resolve({
-            image: img,
-            type: file.type,
-            width: img.width,
-            height: img.height
-          })
+          img.src = objectURL
         }
-        img.src = e.target.result
+      } catch(e) {
+        reject(e)
       }
     }
     reader.onerror = function(e) {

package/front/src/preprocessImageFile.js

@@ -1,5 +1,5 @@
 import {
-  imageToCanvas, loadImageUpload, cancelOrientation, hasAlpha, isExifOrientationSupported
+  imageToCanvas, loadImageUpload, cancelOrientation, hasAlpha, isExifOrientationSupported, loadImage
 } from "./imageUtils.js"
 import imageResizer from "./imageResizer"
 
@@ -68,6 +68,8 @@ async function preProcessImageFile({ file, image, canvas }, config) {
 
   if(!canvas) canvas = imageToCanvas(image.image)
 
+  const exifOrientationSupported = (await isExifOrientationSupported())
+
   if(image.width > maxUploadWidth || image.height > maxUploadHeight ) { /// RESIZING NEEDED
     const maxRatio = maxUploadWidth / maxUploadHeight
     const inputRatio = image.width / image.height
@@ -77,30 +79,38 @@ async function preProcessImageFile({ file, image, canvas }, config) {
       targetWidth = maxUploadWidth
       targetHeight = Math.round(maxUploadWidth / inputRatio)
     } else { /// scale to max height
+      let scale = maxUploadHeight / image.height
       targetWidth = Math.round(maxUploadHeight * inputRatio)
       targetHeight = maxUploadHeight
     }
 
     console.log(`RESIZING ${image.width}x${image.height} => ${targetWidth}x${targetHeight}`)
 
+    let [destWidth, destHeight] =
+      (image.orientation > 4/* && !exifOrientationSupported*/) /// use orientation when scaling even if supported!
+      ? [targetHeight, targetWidth]
+      : [targetWidth, targetHeight]
     let destCanvas = document.createElement('canvas')
-    if(image.orientation > 4 && !(await isExifOrientationSupported())) { // Swap dimmensions
-      destCanvas.width = targetHeight
-      destCanvas.height = targetWidth
-    } else {
-      destCanvas.width = targetWidth
-      destCanvas.height = targetHeight
+    destCanvas.width = destWidth
+    destCanvas.height = destHeight
+    try {
+      await imageResizer.resize(canvas, destCanvas, {
+        unsharpAmount: 80,
+        unsharpRadius: 0.6,
+        unsharpThreshold: 2,
+        alpha: hasAlpha(canvas)
+      })
+    } catch (e) {
+      const context = destCanvas.getContext('2d')
+      context.imageSmoothingEnabled = true
+      context.imageSmoothingQuality = 'high'
+      context.drawImage(canvas, 0, 0, destCanvas.width, destCanvas.height)
     }
-    await imageResizer.resize(canvas, destCanvas, {
-      unsharpAmount: 80,
-      unsharpRadius: 0.6,
-      unsharpThreshold: 2,
-      alpha: hasAlpha(canvas)
-    })
     canvas = destCanvas
   }
 
-  if(image.orientation && !(await isExifOrientationSupported())) {
+  if(image.orientation && !exifOrientationSupported) {
+    // if exif orientation is supoorted it will be automatically canceled!
     console.log("CANCEL ORIENTATION", image.orientation)
     canvas = cancelOrientation(canvas, image.orientation)
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@live-change/image-frontend",
-  "version": "0.9.25",
+  "version": "0.9.27",
   "scripts": {
     "memDev": "node server/start.js memDev --enableSessions --initScript ./init.js --dbAccess",
     "localDevInit": "rm tmp.db; lcli localDev --enableSessions --initScript ./init.js",
@@ -22,15 +22,15 @@
   "type": "module",
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.7.2",
-    "@live-change/cli": "^0.9.25",
-    "@live-change/dao": "^0.9.25",
-    "@live-change/dao-vue3": "^0.9.25",
-    "@live-change/dao-websocket": "^0.9.25",
-    "@live-change/framework": "^0.9.25",
-    "@live-change/image-service": "^0.9.25",
-    "@live-change/session-service": "^0.9.25",
-    "@live-change/vue3-components": "^0.9.25",
-    "@live-change/vue3-ssr": "^0.9.25",
+    "@live-change/cli": "^0.9.27",
+    "@live-change/dao": "^0.9.27",
+    "@live-change/dao-vue3": "^0.9.27",
+    "@live-change/dao-websocket": "^0.9.27",
+    "@live-change/framework": "^0.9.27",
+    "@live-change/image-service": "^0.9.27",
+    "@live-change/session-service": "^0.9.27",
+    "@live-change/vue3-components": "^0.9.27",
+    "@live-change/vue3-ssr": "^0.9.27",
     "@vueuse/core": "^12.3.0",
     "codeceptjs-assert": "^0.0.5",
     "compression": "^1.7.5",
@@ -50,7 +50,7 @@
     "vue3-scroll-border": "0.1.6"
   },
   "devDependencies": {
-    "@live-change/codeceptjs-helper": "^0.9.25",
+    "@live-change/codeceptjs-helper": "^0.9.27",
     "codeceptjs": "^3.6.10",
     "generate-password": "1.7.1",
     "playwright": "1.49.1",
@@ -61,5 +61,5 @@
   "author": "Michał Łaszczewski <michal@laszczewski.pl>",
   "license": "BSD-3-Clause",
   "description": "",
-  "gitHead": "04e2869238087adc1a48784048614e1ee738ad1e"
+  "gitHead": "110f38f6d6a07310e7bf5ba0eaa15426795624e8"
 }