1585624140
How to use WebAssembly to Style Images
Web solutions like WebAssembly, WebGL, and WebGPU exist to leverage the considerable computational power users have at their disposal today.
WebAssembly (Wasm) is a universal, low-level bytecode that runs on the web. Being low-level binary code it has lesser size and better performance than code executed with the JS engine shipped with browsers today.
Wasm allows developers to code with languages like Rust, the TypeScript-like compiler AssemblyScript, and Emscripten (C/C++) and compile down to the Wasm format. Wasm offers a compact binary format, with predictable performance to run alongside JavaScript. It is currently available in all major browsers and has runtimes for servers as well.
If you’re already familiar with WebAssembly, please feel free to skip the next section, where we will learn the basics of using it in browsers.
Warming up: Hello from Wasm!
Execution of the Wasm binary from our JavaScript (and vice versa) requires some boilerplate code. Thankfully, we have the Emscripten compiler, which does all the heavy lifting for us and provides us a JavaScript file.
Setting up Emscripten
We will use C/C++ to write our Wasm code, so we require emsdk, which is Emscripten’s tool to get the compiler and all the other tools you need.
The last command sets up the path so it can find emcc, the Emscripten compiler tool, and everything else we need.
Nostalgic scenes: Writing some C
Once the compiler setup is done, let’s start writing our C code and get it compiled to Wasm. Here is a small hello world example of code in C.
emcc will do all the heavy lifting of compilation and transformation for us here. A single emcc command will return Wasm-ready code to use for our web app. Here it is:
The output file hello.js can be tested by simply invoking it using Node:
Since we are targeting a web platform, let’s get it running in our web app.
Time for action: Executing it in our web app
The C code we wrote was just to check whether our setup was done correctly. Here, for our web app, let’s try to calculate the square root of a given number using Wasm. Here is how our C code will look like:
#include <math.h>
#include <stdlib.h>
#include <stdio.h>
extern "C" {
float getSqrt (float num) {
return sqrt(num);
}
float getSqr (float num) {
return num * num;
}
}
Here, methods defined in the extern "C" block are the ones accessible from JS code. Besides placing these methods in that block, we will mention them in the compiler option as EXPORTED_FUNCTIONS.
We will also add an optimization level to our compilation command. The higher the optimization level, the longer it will take to compile code, but the generated code will be more performant. You can read about these optimizations here.
So our new compile command will look like this:
emcc -o hello.js hello.cpp -Os \
-s WASM=1 \
-s EXPORTED_FUNCTIONS="['_getSqrt','_getSqr']";
Since we will be using a React application built with all modern JS tooling, we will tweak the JS file generated by emcc. We will dispatch a DoneEvent at the end of our JS file to know when both the Wasm and JS files are available for our app. Here is how it will be done:
sed -i .bak 's/else{doRun()}/&window.wasmScript.dispatchEvent(window.wasmDoneEvent);/' hello.js
Notice that we have added the event wasmDoneEvent to wasmScript .
Now that our Wasm and JS wrappers are ready, we can import them into our React app to see it in action. This is what our code to load the Wasm module will look like:
const WASM_URL = "./hello.wasm";
const WASM_JS_URL = "./hello.js";
const getWASMModule = () => {
return new Promise((resolve, reject) => {
if (!("WebAssembly" in window)) {
console.warn("Your Browser doesn't support WASM");
reject("Your Browser doesn't support WASM");
}
fetch(WASM_URL).then(response => {
return response.arrayBuffer();
}).then(buffer => {
const wasmModule = new WebAssembly.Module(buffer);
const script = document.createElement("script");
// Adding event listener with callback
script.addEventListener("wasmDone", buildWam);
script.src = WASM_JS_URL;
// Adding global script instance
window.wasmScript = script;
// Adding global event
window.wasmDoneEvent = new Event("wasmDone");
document.body.appendChild(script);
function buildWam() {
Module.wasmBinary = buffer;
console.log("Emscripten boilerplate loaded.");
const wasmMethods = {};
wasmMethods["getSqrt"] = function(number) {
return _getSqrt(number);
};
wasmMethods["getSqr"] = function(number) {
return _getSqr(number);
};
resolve(wasmMethods);
}
});
});
};
As we can see, this function will resolve to an object with a wrapper around Wasm methods. This wraps up our basic introduction of using WebAssembly in our React app. Now let’s dive into the task at hand.
Image filters using WebAssembly
Let’s get to our focus today: applying filters to images using Wasm. We will convert our image to a linear array because Wasm works on linear memory. Since each pixel’s color can be represented in RGB format, we consider each pixel in a four-dimensional RGBA (red, green, blue, and alpha) color space. Each dimension ranges from 0 to 255, assuming 24-bit color.
Starting off with JavaScript: Getting image data
We will extract image data by rendering our image into the HTML canvas. Have a look at the utility function that gets us image data from the URL provided.
function toCanvas(source) {
if (source instanceof HTMLCanvasElement) {
return source;
}
const canvas = document.createElement("canvas");
canvas.width = source.videoWidth || source.naturalWidth || source.width;
canvas.height = source.videoHeight || source.naturalHeight || source.height;
canvas.getContext("2d").drawImage(source, 0, 0, canvas.width, canvas.height);
return canvas;
}
export function getImageData({ url, width = 244, height = 224 }) {
console.assert(url);
return new Promise((resolve, reject) => {
const img = new Image();
img.crossOrigin = "anonymous";
img.src = url;
img.width = width;
img.height = height;
img.onload = function() {
var canvas = toCanvas(img);
resolve(
canvas.getContext("2d").getImageData(0, 0, canvas.width, canvas.height)
);
};
img.onerror = function(e) {
reject(e);
};
});
}
This method creates a new Image object, and once the image is loaded, it will draw the image on the canvas. From canvas, it returns image data that is a linear array, where every four elements of the array represent the red, green, blue, and alpha channels of a pixel.
The Wasm!
On the Wasm side, we will receive an image as a linear array that we have extracted from canvas. Wasm code will make changes to each pixel of the image to apply different filters. Let’s have a look at the implementation of a grayscale effect.
void grayScale (unsigned char* data, int len) {
for (int i = 0; i < len; i += 4) {
int r = data[i];
int g = data[i+1];
int b = data[i+2];
int a = data[i+3];
data[i] = r;
data[i+1] = r;
data[i+2] = r;
data[i+3] = a;
}
}
The method above receives the image as an array and its length. It iterates through all pixels and sets their green and blue channels to be the same as red to create the grayscale effect.
Image data to and from Wasm
Sharing memory across WebAssembly and JavaScript is not an easy task. Thankfully, Emscripten does all the heavy lifting for us. It exposes the _malloc and _free methods to allocate and release memory for Wasm. We will convert our JS array into unsigned integer arrays and copy it to memory allocated for Wasm. Here is how our code looks on the JS side:
function(imageData) {
const { length } = imageData;
const memory = _malloc(length); // Allocating WASM memory
HEAPU8.set(imageData, memory); // Copying JS image data to WASM memory
_grayScale(memory, length); // Calling WASM method
const filteredImageData = HEAPU8.subarray(memory, memory + length); // Converting WASM data to JS Image data
_free(memory); // Freeing WASM memory
return filteredImageData;
};
Rendering image with effect
Bingo! This image data can be used to render the image with the effect. Here’s how it’s done:
function writeImageDataToCanvas(canvas, data, width, height) {
canvas.width = width;
canvas.height = height;
var context = canvas.getContext("2d");
var imageData = context.createImageData(width, height);
imageData.data.set(data);
context.putImageData(imageData, 0, 0);
return canvas;
}
A few more effects
Here are a few more effects for better context and understanding.
Invert
The invert effect is the same as grayscale on the JS side. It will follow the same steps, but the _grayscale call of the Wasm method will be replaced by _invert. Here’s the Wasm implementation of this effect:
void invert (unsigned char* data, int len) {
for (int i = 0; i < len; i += 4) {
data[i] = 255 - data[i]; //r
data[i+1] = 255 - data[i+1]; //g
data[i+2] = 255 - data[i+2]; //b
}
}
Noise
Few image filters require processing of channels as float values, but noise is one of them. For such filters, we will convert our image data array along with other required changes. The JS side of this filter will be:
function(imageData) {
const { length } = imageData;
const memory = _malloc(length * Float32Array.BYTES_PER_ELEMENT);
HEAPF32.set(imageData, memory / Float32Array.BYTES_PER_ELEMENT);
_noise(memory, length);
const filtered = HEAPF32.subarray(
memory / Float32Array.BYTES_PER_ELEMENT,
memory / Float32Array.BYTES_PER_ELEMENT + length
);
_free(memory);
return filtered;
};
Whereas the Wasm part looks like this:
void noise (float* data, int len) {
int random;
for (int i = 0; i < len; i += 4) {
random = (rand() % 70) - 35;
data[i] = data[i] + random; //r
data[i+1] = data[i+1] + random; //g
data[i+2] = data[i+2] + random; //b
}
}
Brighten
This filter will be similar to invert and grayscale, except it takes an extra parameter of brightness. Here is the Wasm implementation:
void brighten (unsigned char* data, int len, int brightness) {
for (int i = 0; i < len; i += 4) {
data[i] + brightness > 255 ? 255 : data[i] += brightness;
data[i+1] + brightness > 255 ? 255 : data[i+1] += brightness;
data[i+2] + brightness > 255 ? 255 : data[i+2] += brightness;
}
}
Wrapping it up
If used to its full potential, WebAssembly can without a doubt revolutionize modern frontends. With the usage of linear memory and proper data structures, Wasm can perform CPU-intensive tasks in a way more performant manner than JS.
Though Wasm is still quite immature, it has made some great advances recently. Tools like Emscripten are doing a lot of heavy lifting to make Wasm easier and more accessible to many frontend devs.
We have used C++ here in our use case, though Wasm is available in Go, Rust, and AssemblyScript as well. This variety of options makes it more intuitive for many developers. This decade will see more robust frontends and sophisticated experiences with the help of technologies like Wasm and WebGL that are keeping the web great!
Originally published by Zain Sajjad at https://blog.logrocket.com
#webassembly #wasm #web-development #image
What is GEEK
Buddha Community
1597469369
Crop and Resize Image Before Upload In Laravel Using with jQuery Copper JS
Crop and resize image size before upload in laravel using jquery copper js. In this post, i will show you how to crop and resize image size in laravel using jQuery copper js in laravel.
This laravel crop image before upload using cropper js looks like:
Laravel Crop Image Before Uploading using Cropper js Tutorial
Laravel crop image before upload tutorial, follow the following steps and learn how to use cropper js to crop image before uploading in laravel app:
- Step 1: Install New Laravel App
- Step 2: Add Database Details
- Step 3: Create Migration & Model
- Step 4: Add Route
- Step 5: Create Controller By Artisan
- Step 6: Create Blade View
- Step 7: Make Upload Directory
- Step 8: Start Development Server
Read More => https://www.tutsmake.com/laravel-crop-image-before-upload-using-jquery-copper-js/
Live Demo Laravel Crop image Before Upload.
#laravel crop image before upload, #laravel crop and resize image using cropper.js #ajax image upload and crop with jquery and laravel #crop and upload image ajax jquery laravel #crop image while uploading with jquery laravel #image crop and upload using jquery with laravel ajax
1620729846
Why Use WordPress? What Can You Do With WordPress?
Can you use WordPress for anything other than blogging? To your surprise, yes. WordPress is more than just a blogging tool, and it has helped thousands of websites and web applications to thrive. The use of WordPress powers around 40% of online projects, and today in our blog, we would visit some amazing uses of WordPress other than blogging.
What Is The Use Of WordPress?
WordPress is the most popular website platform in the world. It is the first choice of businesses that want to set a feature-rich and dynamic Content Management System. So, if you ask what WordPress is used for, the answer is – everything. It is a super-flexible, feature-rich and secure platform that offers everything to build unique websites and applications. Let’s start knowing them:
1. Multiple Websites Under A Single Installation
WordPress Multisite allows you to develop multiple sites from a single WordPress installation. You can download WordPress and start building websites you want to launch under a single server. Literally speaking, you can handle hundreds of sites from one single dashboard, which now needs applause.
It is a highly efficient platform that allows you to easily run several websites under the same login credentials. One of the best things about WordPress is the themes it has to offer. You can simply download them and plugin for various sites and save space on sites without losing their speed.
2. WordPress Social Network
WordPress can be used for high-end projects such as Social Media Network. If you don’t have the money and patience to hire a coder and invest months in building a feature-rich social media site, go for WordPress. It is one of the most amazing uses of WordPress. Its stunning CMS is unbeatable. And you can build sites as good as Facebook or Reddit etc. It can just make the process a lot easier.
To set up a social media network, you would have to download a WordPress Plugin called BuddyPress. It would allow you to connect a community page with ease and would provide all the necessary features of a community or social media. It has direct messaging, activity stream, user groups, extended profiles, and so much more. You just have to download and configure it.
If BuddyPress doesn’t meet all your needs, don’t give up on your dreams. You can try out WP Symposium or PeepSo. There are also several themes you can use to build a social network.
3. Create A Forum For Your Brand’s Community
Communities are very important for your business. They help you stay in constant connection with your users and consumers. And allow you to turn them into a loyal customer base. Meanwhile, there are many good technologies that can be used for building a community page – the good old WordPress is still the best.
It is the best community development technology. If you want to build your online community, you need to consider all the amazing features you get with WordPress. Plugins such as BB Press is an open-source, template-driven PHP/ MySQL forum software. It is very simple and doesn’t hamper the experience of the website.
Other tools such as wpFoRo and Asgaros Forum are equally good for creating a community blog. They are lightweight tools that are easy to manage and integrate with your WordPress site easily. However, there is only one tiny problem; you need to have some technical knowledge to build a WordPress Community blog page.
4. Shortcodes
Since we gave you a problem in the previous section, we would also give you a perfect solution for it. You might not know to code, but you have shortcodes. Shortcodes help you execute functions without having to code. It is an easy way to build an amazing website, add new features, customize plugins easily. They are short lines of code, and rather than memorizing multiple lines; you can have zero technical knowledge and start building a feature-rich website or application.
There are also plugins like Shortcoder, Shortcodes Ultimate, and the Basics available on WordPress that can be used, and you would not even have to remember the shortcodes.
5. Build Online Stores
If you still think about why to use WordPress, use it to build an online store. You can start selling your goods online and start selling. It is an affordable technology that helps you build a feature-rich eCommerce store with WordPress.
WooCommerce is an extension of WordPress and is one of the most used eCommerce solutions. WooCommerce holds a 28% share of the global market and is one of the best ways to set up an online store. It allows you to build user-friendly and professional online stores and has thousands of free and paid extensions. Moreover as an open-source platform, and you don’t have to pay for the license.
Apart from WooCommerce, there are Easy Digital Downloads, iThemes Exchange, Shopify eCommerce plugin, and so much more available.
6. Security Features
WordPress takes security very seriously. It offers tons of external solutions that help you in safeguarding your WordPress site. While there is no way to ensure 100% security, it provides regular updates with security patches and provides several plugins to help with backups, two-factor authorization, and more.
By choosing hosting providers like WP Engine, you can improve the security of the website. It helps in threat detection, manage patching and updates, and internal security audits for the customers, and so much more.
#use of wordpress #use wordpress for business website #use wordpress for website #what is use of wordpress #why use wordpress #why use wordpress to build a website
1585624140
How to use WebAssembly to Style Images
Web solutions like WebAssembly, WebGL, and WebGPU exist to leverage the considerable computational power users have at their disposal today.
WebAssembly (Wasm) is a universal, low-level bytecode that runs on the web. Being low-level binary code it has lesser size and better performance than code executed with the JS engine shipped with browsers today.
Wasm allows developers to code with languages like Rust, the TypeScript-like compiler AssemblyScript, and Emscripten (C/C++) and compile down to the Wasm format. Wasm offers a compact binary format, with predictable performance to run alongside JavaScript. It is currently available in all major browsers and has runtimes for servers as well.
If you’re already familiar with WebAssembly, please feel free to skip the next section, where we will learn the basics of using it in browsers.
Warming up: Hello from Wasm!
Execution of the Wasm binary from our JavaScript (and vice versa) requires some boilerplate code. Thankfully, we have the Emscripten compiler, which does all the heavy lifting for us and provides us a JavaScript file.
Setting up Emscripten
We will use C/C++ to write our Wasm code, so we require emsdk, which is Emscripten’s tool to get the compiler and all the other tools you need.
The last command sets up the path so it can find emcc, the Emscripten compiler tool, and everything else we need.
Nostalgic scenes: Writing some C
Once the compiler setup is done, let’s start writing our C code and get it compiled to Wasm. Here is a small hello world example of code in C.
emcc will do all the heavy lifting of compilation and transformation for us here. A single emcc command will return Wasm-ready code to use for our web app. Here it is:
The output file hello.js can be tested by simply invoking it using Node:
Since we are targeting a web platform, let’s get it running in our web app.
Time for action: Executing it in our web app
The C code we wrote was just to check whether our setup was done correctly. Here, for our web app, let’s try to calculate the square root of a given number using Wasm. Here is how our C code will look like:
#include <math.h>
#include <stdlib.h>
#include <stdio.h>
extern "C" {
float getSqrt (float num) {
return sqrt(num);
}
float getSqr (float num) {
return num * num;
}
}
Here, methods defined in the extern "C" block are the ones accessible from JS code. Besides placing these methods in that block, we will mention them in the compiler option as EXPORTED_FUNCTIONS.
We will also add an optimization level to our compilation command. The higher the optimization level, the longer it will take to compile code, but the generated code will be more performant. You can read about these optimizations here.
So our new compile command will look like this:
emcc -o hello.js hello.cpp -Os \
-s WASM=1 \
-s EXPORTED_FUNCTIONS="['_getSqrt','_getSqr']";
Since we will be using a React application built with all modern JS tooling, we will tweak the JS file generated by emcc. We will dispatch a DoneEvent at the end of our JS file to know when both the Wasm and JS files are available for our app. Here is how it will be done:
sed -i .bak 's/else{doRun()}/&window.wasmScript.dispatchEvent(window.wasmDoneEvent);/' hello.js
Notice that we have added the event wasmDoneEvent to wasmScript .
Now that our Wasm and JS wrappers are ready, we can import them into our React app to see it in action. This is what our code to load the Wasm module will look like:
const WASM_URL = "./hello.wasm";
const WASM_JS_URL = "./hello.js";
const getWASMModule = () => {
return new Promise((resolve, reject) => {
if (!("WebAssembly" in window)) {
console.warn("Your Browser doesn't support WASM");
reject("Your Browser doesn't support WASM");
}
fetch(WASM_URL).then(response => {
return response.arrayBuffer();
}).then(buffer => {
const wasmModule = new WebAssembly.Module(buffer);
const script = document.createElement("script");
// Adding event listener with callback
script.addEventListener("wasmDone", buildWam);
script.src = WASM_JS_URL;
// Adding global script instance
window.wasmScript = script;
// Adding global event
window.wasmDoneEvent = new Event("wasmDone");
document.body.appendChild(script);
function buildWam() {
Module.wasmBinary = buffer;
console.log("Emscripten boilerplate loaded.");
const wasmMethods = {};
wasmMethods["getSqrt"] = function(number) {
return _getSqrt(number);
};
wasmMethods["getSqr"] = function(number) {
return _getSqr(number);
};
resolve(wasmMethods);
}
});
});
};
As we can see, this function will resolve to an object with a wrapper around Wasm methods. This wraps up our basic introduction of using WebAssembly in our React app. Now let’s dive into the task at hand.
Image filters using WebAssembly
Let’s get to our focus today: applying filters to images using Wasm. We will convert our image to a linear array because Wasm works on linear memory. Since each pixel’s color can be represented in RGB format, we consider each pixel in a four-dimensional RGBA (red, green, blue, and alpha) color space. Each dimension ranges from 0 to 255, assuming 24-bit color.
Starting off with JavaScript: Getting image data
We will extract image data by rendering our image into the HTML canvas. Have a look at the utility function that gets us image data from the URL provided.
function toCanvas(source) {
if (source instanceof HTMLCanvasElement) {
return source;
}
const canvas = document.createElement("canvas");
canvas.width = source.videoWidth || source.naturalWidth || source.width;
canvas.height = source.videoHeight || source.naturalHeight || source.height;
canvas.getContext("2d").drawImage(source, 0, 0, canvas.width, canvas.height);
return canvas;
}
export function getImageData({ url, width = 244, height = 224 }) {
console.assert(url);
return new Promise((resolve, reject) => {
const img = new Image();
img.crossOrigin = "anonymous";
img.src = url;
img.width = width;
img.height = height;
img.onload = function() {
var canvas = toCanvas(img);
resolve(
canvas.getContext("2d").getImageData(0, 0, canvas.width, canvas.height)
);
};
img.onerror = function(e) {
reject(e);
};
});
}
This method creates a new Image object, and once the image is loaded, it will draw the image on the canvas. From canvas, it returns image data that is a linear array, where every four elements of the array represent the red, green, blue, and alpha channels of a pixel.
The Wasm!
On the Wasm side, we will receive an image as a linear array that we have extracted from canvas. Wasm code will make changes to each pixel of the image to apply different filters. Let’s have a look at the implementation of a grayscale effect.
void grayScale (unsigned char* data, int len) {
for (int i = 0; i < len; i += 4) {
int r = data[i];
int g = data[i+1];
int b = data[i+2];
int a = data[i+3];
data[i] = r;
data[i+1] = r;
data[i+2] = r;
data[i+3] = a;
}
}
The method above receives the image as an array and its length. It iterates through all pixels and sets their green and blue channels to be the same as red to create the grayscale effect.
Image data to and from Wasm
Sharing memory across WebAssembly and JavaScript is not an easy task. Thankfully, Emscripten does all the heavy lifting for us. It exposes the _malloc and _free methods to allocate and release memory for Wasm. We will convert our JS array into unsigned integer arrays and copy it to memory allocated for Wasm. Here is how our code looks on the JS side:
function(imageData) {
const { length } = imageData;
const memory = _malloc(length); // Allocating WASM memory
HEAPU8.set(imageData, memory); // Copying JS image data to WASM memory
_grayScale(memory, length); // Calling WASM method
const filteredImageData = HEAPU8.subarray(memory, memory + length); // Converting WASM data to JS Image data
_free(memory); // Freeing WASM memory
return filteredImageData;
};
Rendering image with effect
Bingo! This image data can be used to render the image with the effect. Here’s how it’s done:
function writeImageDataToCanvas(canvas, data, width, height) {
canvas.width = width;
canvas.height = height;
var context = canvas.getContext("2d");
var imageData = context.createImageData(width, height);
imageData.data.set(data);
context.putImageData(imageData, 0, 0);
return canvas;
}
A few more effects
Here are a few more effects for better context and understanding.
Invert
The invert effect is the same as grayscale on the JS side. It will follow the same steps, but the _grayscale call of the Wasm method will be replaced by _invert. Here’s the Wasm implementation of this effect:
void invert (unsigned char* data, int len) {
for (int i = 0; i < len; i += 4) {
data[i] = 255 - data[i]; //r
data[i+1] = 255 - data[i+1]; //g
data[i+2] = 255 - data[i+2]; //b
}
}
Noise
Few image filters require processing of channels as float values, but noise is one of them. For such filters, we will convert our image data array along with other required changes. The JS side of this filter will be:
function(imageData) {
const { length } = imageData;
const memory = _malloc(length * Float32Array.BYTES_PER_ELEMENT);
HEAPF32.set(imageData, memory / Float32Array.BYTES_PER_ELEMENT);
_noise(memory, length);
const filtered = HEAPF32.subarray(
memory / Float32Array.BYTES_PER_ELEMENT,
memory / Float32Array.BYTES_PER_ELEMENT + length
);
_free(memory);
return filtered;
};
Whereas the Wasm part looks like this:
void noise (float* data, int len) {
int random;
for (int i = 0; i < len; i += 4) {
random = (rand() % 70) - 35;
data[i] = data[i] + random; //r
data[i+1] = data[i+1] + random; //g
data[i+2] = data[i+2] + random; //b
}
}
Brighten
This filter will be similar to invert and grayscale, except it takes an extra parameter of brightness. Here is the Wasm implementation:
void brighten (unsigned char* data, int len, int brightness) {
for (int i = 0; i < len; i += 4) {
data[i] + brightness > 255 ? 255 : data[i] += brightness;
data[i+1] + brightness > 255 ? 255 : data[i+1] += brightness;
data[i+2] + brightness > 255 ? 255 : data[i+2] += brightness;
}
}
Wrapping it up
If used to its full potential, WebAssembly can without a doubt revolutionize modern frontends. With the usage of linear memory and proper data structures, Wasm can perform CPU-intensive tasks in a way more performant manner than JS.
Though Wasm is still quite immature, it has made some great advances recently. Tools like Emscripten are doing a lot of heavy lifting to make Wasm easier and more accessible to many frontend devs.
We have used C++ here in our use case, though Wasm is available in Go, Rust, and AssemblyScript as well. This variety of options makes it more intuitive for many developers. This decade will see more robust frontends and sophisticated experiences with the help of technologies like Wasm and WebGL that are keeping the web great!
Originally published by Zain Sajjad at https://blog.logrocket.com
#webassembly #wasm #web-development #image
1597565398
Laravel 7/6 Image Validation
In this image validation in laravel 7/6, i will share with you how validate image and image file mime type like like jpeg, png, bmp, gif, svg, or webp before uploading image into database and server folder in laravel app.
https://www.tutsmake.com/image-validation-in-laravel/
#laravel image validation #image validation in laravel 7 #laravel image size validation #laravel image upload #laravel image validation max #laravel 6 image validation
1620200340
how to integrate CKEditor in Django
how to integrate CKEditor in Django
Welcome to my Blog, in this article we learn about how to integrate CKEditor in Django and inside this, we enable the image upload button to add an image in the blog from local. When I add a CKEditor first time in my project then it was very difficult for me but now I can easily implement it in my project so you can learn and implement CKEditor in your project easily.
how to integrate CKEditor in Django
#django #add image upload in ckeditor #add image upload option ckeditor #ckeditor image upload #ckeditor image upload from local #how to add ckeditor in django #how to add image upload plugin in ckeditor #how to install ckeditor in django #how to integrate ckeditor in django #image upload in ckeditor #image upload option in ckeditor