As the image is large, the response is slow, so must limit! How to do it? thanks!
var editor = new Quill('#postContent', {
modules: {
toolbar: '#toolbar-container'
},
theme: 'snow',
//placeholder: '不超过3000字...',
});
Sure can, I made a Quill module to compress images once they are added to the Quill editor (Pasted, Uploaded, Dragged). You can adjust the compression and quality of the compression too.
https://github.com/benwinding/quill-image-compress
import ImageCompress from 'quill-image-compress';
Quill.register('modules/imageCompress', ImageCompress);
const quill = new Quill(editor, {
// ...
modules: {
// ...
imageCompress: {
quality: 0.7, // default
maxWidth: 1000, // default
maxHeight: 1000, // default
imageType: 'image/jpeg', // default
debug: true, // default
}
}
});
Yes he can. When you add your image, use :
quill.insertEmbed(0, 'image', value, 'user'); // to insert the image
quill.formatText(0, 1, 'width', '300px'); //to limit the width
This is not possible at the moment, you would have to create a custom image handler. Feel free to open a feature request.
I gave him this solution, it is not the right one, but it works temporarily:
I modified quill.js and add this validation:
var maxSize = 2097152; // Maximum limit of 2mb (2,097,152 kb)
var fileSize = fileInput.files[0].size;
if (fileSize <= maxSize) { .... }
Image example of quill.js:
Related
How to check the quality of image in react native like if I want to take 60%. Quality image so how to get it
I tried it through pixel resolution but it didn't work
If you are using react-native-image-picker for uploading images, you can set maxWidth, maxHeight or quality of image for reducing the size in options.
const options = {
title: 'Select Picture',
storageOptions: {
skipBackup: true,
path: 'images',
},
maxWidth: 500,
maxHeight: 500,
quality: 0.5,
};
Or if you want to fit in the image in any View you can use resizeMode property of Image which has the type enum('cover', 'contain', 'stretch', 'repeat', 'center').
you can user react-native-image-picker library and can restrict user for image quality to upload and you can edit rest of the parameters on the basis of your requirements.
const result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: "Images",
allowsEditing: true,
base64: true,
quality: 0.6,
});
if (!result.cancelled) {
const fileSize = result.base64.length * (3 / 4) - 2;
if (fileSize > 6000000) {
setFileSizeError(true);
} else {
setFileSizeError(false);
const base64 = `data:image/png;base64,${result.base64}`;
await dispatch(myExampleAction(base64));
}
}
I have figma design 2380х3368.
So, I create pdf with such parameters:
const doc = new jsPDF({orientation: 'portrait',unit: 'px', userUnit: 300, format: [2780, 3368]});
and:
doc.html(pageTemplate.querySelector('html'), {
callback: function(doc) {
doc.save('pdf-template.pdf');
},
margin: [0,0,0,0],
});
But this size is too big for printing pdf. I want dpi 300, so it would be ok, but I can't find where to put this in jsPDF
I really can't find any good documentation or any good samples on how to do this.
Here is my code. This is running in an Asp.net Core View.
var imageMarker = "https://unpkg.com/leaflet#1.7.1/dist/images/marker-icon.png";
for (var i = 0; i < locationData; i++) {
let imageName = 'image' + i;
map.imageSprite.add(imageName, imageMarker).then(function () {
//Create a data source and add it to the map.
datasource = new atlas.source.DataSource();
map.sources.add(datasource);
//Create a point feature and add it to the data source.
datasource.add(new atlas.data.Feature(new atlas.data.Point(i.longitude, i.latitude), {
name: i.name
}));
//Add a layer for rendering point data as symbols.
map.layers.add(new atlas.layer.SymbolLayer(datasource, null, {
iconOptions: {
//Pass in the id of the custom icon that was loaded into the map resources.
image: imageName,
//Optionally scale the size of the icon.
size: 0.5
},
textOptions: {
//Add some text
textField: name,
//Offset the text so that it appears on top of the icon.
offset: [0, -2]
}
}));
});
}
I'm not getting any errors. The Symbols just don't appear on the map.
The sample linked below works in my map.events.add ready function.
Image Sprite sample
Any help is much appreciated! Thanks!
Here is what ended up working for me. I worked with Microsoft Support on this. locationData contains the image, longitude and latitude. The min and max of both longitude and latitude is passed in as well to set the camera boundry. The biggest issue with my original code was setting iconOptions size to 0.5. The plugin did not like that. It's now set to 1.
function addMarkerSymbols(locationData, min_long, min_lat, max_long, max_lat)
{
map.setCamera({
bounds: [min_long, min_lat, max_long, max_lat],
padding: 50
});
$.each(locationData, function (i, item)
{
map.imageSprite.add('default-icon' + i, item.locationImage);
//Create a data source and add it to the map.
var datasource = new atlas.source.DataSource();
map.sources.add(datasource);
//Add a data set to the data source.
datasource.add(new atlas.data.Feature(new atlas.data.Point([item.longitude, item.latitude]), null));
//Create a symbol layer to render the points.
layer = new atlas.layer.SymbolLayer(datasource, null, {
iconOptions: {
//The map control has built in icons for bar, coffee and restaurant that we can use.
image: 'default-icon' + i,
anchor: 'center',
allowOverlap: true,
size: 1
}
});
map.layers.add(layer);
});
}
I am using Extjs - 4.1.0 and I want to prompt download window. I used 'iframe'. The window displays only when the file being posted is zip/mp3 but when the file being posted is text/image file, the window doesn't appear. Is there some property to be set to enable download window for text/image/different files?
Please find my code below.
var record = item.findParentByType('itemcontextmenu').record;
Ext.Ajax.request({
url : ORT.Configuration.DOWNLOAD_GRAPHICS_URI+"&graphics="+record.get('id'),
success: function (response, opt) {
result = Ext.decode(response.responseText);
try {Ext.destroy(Ext.get('graphicsDownloadIframe'));}catch(e) {}
Ext.core.DomHelper.append(document.body, {
tag: 'iframe',
id:'graphicsDownloadIframe',
css: 'display:none;visibility:hidden;height:0px;',
src: result.fileName,
frameBorder: 0,
width: 0,
height: 0
});
}
});
It's all about the mimetype and what your browser does with it. So I guess your problem will the that. Which likely will cause the browser to handle the received file different.
Edit
Following is a helper class that I still use
Ext.ux.util.HiddenForm = function(url,fields){
if (!Ext.isArray(fields))
return;
var body = Ext.getBody(),
frame = body.createChild({
tag:'iframe',
cls:'x-hidden',
id:'hiddenform-iframe',
name:'iframe'
}),
form = body.createChild({
tag:'form',
cls:'x-hidden',
id:'hiddenform-form',
action: url,
target:'iframe'
});
Ext.each(fields, function(el,i){
if (!Ext.isArray(el))
return false;
form.createChild({
tag:'input',
type:'text',
cls:'x-hidden',
id: 'hiddenform-' + el[0],
name: el[0],
value: el[1]
});
});
form.dom.submit();
return frame;
}
Usage
Ext.ux.util.HiddenForm('http://localhost/file/fetch',[['PropName','PropValue'],['Prop2Name','Prop2Value']])
The server take these arguments and build up a sort of 'FileStreamResult' which trigger a download on the clientside. If you are using a language like .Net or Java then there are already implementations you can use, if you are using PHP you might find this helpful. Anyway, look at your backend...
Absolutely pulling my hair out on this one. There seems to be no black and white solution offered on GitHub - which is strange, since it seems like a fairly simple concept. Perhaps I just don't get it.
Basically, I am trying to create a fluid and responsive portfolio - using Isotope to filter the items. The filtering works fine, the 4 columns are totally fluid and everything looks great when you resize the window.
HOWEVER, for mobile and tablet layouts, I simply need to adapt from a 4-column layout to a 2-column layout.
I tried this:
$(window).load(function(){
var $container = $('#thumbs');
$container.isotope({
filter: '*',
animationOptions: {
duration: 750,
easing: 'linear',
queue: false,
},
});
// initialize Isotope
$container.isotope({
// options...
resizable: false, // disable normal resizing
// set columnWidth to a percentage of container width
masonry: { columnWidth: $container.width() / 4 },
});
// update columnWidth on window resize
$(window).smartresize(function(){
$container.isotope({
// update columnWidth to a percentage of container width
masonry: { columnWidth: $container.width() / 4 }
});
});
// My attempt at using media queries to change 'columnWidth'
$(window).resize(function() {
var width = $(window).width();
if (width < 768) {
$container.isotope( {
// update columnWidth to half of container width
masonry: { columnWidth: $container.width() / 2 }
});
}
});
});
Didn't work :(
Any help would be much appreciated.
This should work to set your number of columns. Then you just divide with columns.
var columns;
// set column number
setColumns();
// rerun function when window is resized
$(window).on('resize', function() {
setColumns();
});
// the function to decide the number of columns
function setColumns() {
if($(window).width() <= 768) {
columns = 2;
} else {
columns = 4;
}
}
I think there's a slightly nicer way where you can still use css media queries. See my answer here: https://stackoverflow.com/a/20270911/1010892
Hope that helps!!