I have implemented Meteor-CollectionFS for image uploading in a post and everything is working fine as like uploading & showing.
Now I'm working for versioning as like resize an image while uploading & given this name is thumb see the below code
ProjectImages = new FS.Collection('ProjectImages', {
stores:[
new FS.Store.FileSystem("images", {
path: "~/files/images"
}),
new FS.Store.FileSystem("thumb", {
transformWrite: function(fileObj, readStream, writeStream){
gm(readStream, fileObj.name())
.resize('400', '350').stream()
.pipe(writeStream);
}
})
// new FS.Store.GridFS('ProjectImages')
],
filter: {
allow: {
contentTypes: ['image/*'],
extensions: ['png', 'PNG', 'jpg', 'JPG', 'jpeg', 'JPEG']
}
}
});
And I'm showing the image as natural as like
this.state.events.map((event, i) => (
....
<img src={ event.projectImage } />
....
and it's showing original image not resized but the log is showing image has resized see the below
FS.File._saveChanges: images
UPDATE: {"$set":{"copies.images":{"name":"dev.jpg","type":"image/jpeg","size":204521,"key":"ProjectImages-NSAxTejMyoQKZvQ6f-dev.jpg","updatedAt":"2018-11-29T08:08:33.230Z","createdAt":"2018-11-29T08:08:33.230Z"}}}
FS.File._saveChanges: thumb
UPDATE: {"$set":{"copies.thumb":{"name":"dev.jpg","type":"image/jpeg","size":24104,"key":"ProjectImages-NSAxTejMyoQKZvQ6f-dev.jpg","updatedAt":"2018-11-29T08:08:33.471Z","createdAt":"2018-11-29T08:08:33.471Z"}}}
......
My question is how to show the thumb image instead of original
Thanks
Related
I have been using react-native video player in order to show video, until video loads I want to display thumbnail so I am using react-native-create-thumbnail to generate thumbnail from video
createThumbnail({
url: video.path,
timeStamp: 10000,
})
.then(response => {
console.log('thumbnail',response)
thumbnailUrl=response.path;
}
)
.catch(err => console.log('thumbnail err',err));
here I get the following object
thumbnail {"height": 300, "path": "file:///data/user/0/com.sheolife/cache/thumbnails/thumb-4b75eaad-2afe-4c3d-994d-3f6206ce5b75.jpeg", "width": 300}
when I add the above thumbnailUrl inside my Videoplayer thumbnail prop, it is still showing black
I try added as below
<VideoPlayer
ref={videoplayerref}
video={{
uri: video
}}
paused={paused}
videoWidth={Dimensions.get("window").width}
videoHeight={400}
thumbnail={{uri:thumbnailUrl}}
resizeMode="contain"
pauseOnPress
// hideControlsOnStart
onStart={(state) => onStart(state)}
onPlayPress={(state) => onPlayPress(state)}
hideControlsOnStart={true}
/>
now here the thumbnailUrl is local file so I thought to write it as follows:
thumbnail={require(`${thumbnailUrl}`)}
but this too is throwing error, could anyone please help me out here, how do I access my thumbnailpath inside videoplayer?
Any leads would be great.
A few days ago, I bought a Gatsby blog theme and tried to modify it. The blog site uses Images(PNG, JPEG), not animated GIFs. So I tried to use GIF images for all blog posts but it affected site performance.
Also, I notice that Gatsby Image doesn't provide a GIF format. How can I use GIF on my blog with high performance?
You can convert GIFs into MP4 videos with H.264 encoding using ffmpeg. Then use <video src="..." /> in place of your img tag. To make this really easy, I have a React component that I use for this that includes automatic playback when the video is visible:
import React, { useEffect } from "react"
import PropTypes from "prop-types"
import { useInView } from "react-intersection-observer"
const GifVideo = ({ threshold = 0.15, ...playerProps }) => {
const [ref, inView] = useInView({ threshold })
useEffect(() => {
if (inView) {
ref.current?.play()
} else {
ref.current?.pause()
}
}, [ref, inView])
return <video ref={ref} autoPlay playsInline muted loop {...playerProps} />
}
export default GifVideo
GifVideo.propTypes = {
src: PropTypes.string,
threshold: PropTypes.number,
className: PropTypes.string,
}
Then to you use it, it's this easy:
<GifVideo src="/your/video.mp4" width={400} className="some-class" />
For what it's worth, I don't recommend using the sharp-backed GraphQL image transformers in Gatsby (gatsby-transformer-sharp). It's exceedingly slow, couples the presentation to the query, and doesn't provide any way to handle art direction.
I use gatsby-remark-interactive-gifs plugin to show gifs on my gatsby blog.
Install gatsby-remark-interactive-gifs
npm install --save gatsby-remark-interactive-gifs
yarn add gatsby-remark-interactive-gifs
Add this config to gatsby-config.js:
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
{
resolve: `gatsby-remark-interactive-gifs`,
options: {
root: `${__dirname}`,
src: `${__dirname}/content/gif`,
dest: `${__dirname}/public/static/gifs`,
play: `${__dirname}/src/img/play.gif`,
placeholder: `${__dirname}/src/img/play.gif`,
loading: `${__dirname}/src/img/play.gif`,
relativePath: `/static/gifs`,
},
},
],
},
},
From plugin document:
root - The root of your project.
src - Where all the gifs you want processed are stored. Absolute path.
dest - A path in public where your gifs are stored. Absolute path.
play - An image to indicate that the gif can be interacted with. Absolute path.
placeholder - An image to show when the gif is missing in action. Absolute path.
loading - An image which shows when the gif is downloading. Absolute path.
relativePath - The relative path served from public/.
! Make sure you are adding this above the prismjs config.
Sample code in MD file to show gifs on your gatsby blog:
<img src="/static/gifs/fileName.gif">
I'm using the package blueimp-load-image package to load an image in my react application. The image should be resized and put into a canvas afterwards.
This is my code that handles the upload. It can only be an image.
const handleImageUpload = e => {
const [file] = e.target.files;
if (file) {
loadImage(
file,
img => {
setImage(img);
changeOffset(img);
},
{
orientation: true,
maxWidth: innerWidth,
maxHeight: innerHeight,
downsamplingRatio: 0.25,
pixelRatio: window.devicePixelRatio,
imageSmoothingEnabled: true,
imageSmoothingQuality: 'high',
canvas: false,
contain: true,
}
);
}
};
The img gets put into a state variable that gets shown in my canvas (I'm using a KonvaImage from react-konva for that). My problem is that if I don't use pixelRatio: window.devicePixelRatio, the image gets shown correctly, but the quality is poor. If I, however, use pixelRatio: window.devicePixelRatio, the picture is zoomed in.
If I log out the img inside the loadImage this is the output. The first one without pixelRatio, the second one with pixelRatio.
This is what the image on the screen looks like (again first one without pixelRation, the second one with pixelRatio):
I hope somebody can help me with my problem. I would of course also be open for a different way of resizing the images if it works better.
Thanks in advance!
I am currently working on a project that has to display geojson data on a map.
I am using the leaflet-directive for AngularJS and it works fine.
My map is correctly displayed with the geojson data.
ANGULAR CONTROLLER
angular.extend($scope, {
intersection: {
lat: 50.891,
lng: 4.258,
zoom: 14
},
defaults: {
scrollWheelZoom: false
},
geojson : {},
layers: {
baselayers: {
xyz: {
name: 'OpenStreetMap (XYZ)',
url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
type: 'xyz'
}
},
overlays: {}
}
});
$scope.$watch("intersection.zoom", function(zoom) {
if(zoom > 17){
$scope.layers.overlays = {
wms: {
name: 'intersectionDraw',
type: 'wms',
visible: true,
url: 'img/map.png'
}
}
};
});
Now I would like to add a feature. I would like to display a png drawing when my zoom reaches the max zoom.For the moment, my code is displaying the png in mosaic. I want this png to get the full height and width of my map and see only this. There is no need to zoom more on this png but if I zoom out the "normal" map will be shown again
The mosaic PNG
Use a L.ImageOverlay. See Leaflet single picture and https://github.com/Leaflet/Leaflet/blob/master/debug/map/image-overlay.html
I'm trying to use plupload with mvc2 but the filebrowser-window does not open.
my code:
<script type="text/javascript">
// Convert divs to queue widgets when the DOM is ready
$(function () {
$("#uploader").pluploadQueue({
// General settings
runtimes: 'gears,flash,silverlight,browserplus,html5',
url: '<%: Url.Content( "~//Uploades/Horses/" ) %>',
max_file_size: '10mb',
chunk_size: '1mb',
unique_names: true,
// Resize images on clientside if we can
resize: { width: 320, height: 240, quality: 90 },
// Specify what files to browse for
filters: [
{ title: "Image files", extensions: "jpg,gif,png" },
{ title: "Zip files", extensions: "zip" }
],
// Flash settings
flash_swf_url: '../../../../Scripts/plupload/plupload.flash.swf',
// Silverlight settings
silverlight_xap_url: '../../../../Scripts/plupload/plupload.silverlight.xap'
});
// Client side form validation
$('form').submit(function (e) {
var uploader = $('#uploader').pluploadQueue();
uploader.refresh();
// Validate number of uploaded files
if (uploader.total.uploaded == 0) {
// Files in queue upload them first
if (uploader.files.length > 0) {
// When all files are uploaded submit form
uploader.bind('UploadProgress', function () {
if (uploader.total.uploaded == uploader.files.length)
$('form').submit();
});
uploader.start();
} else
alert('You must at least upload one file.');
e.preventDefault();
}
});
});
<div id="uploader" style="height:300px">
<p>You browser doesn't have Flash, Silverlight, Gears, BrowserPlus or HTML5 support.</p>
</div>
If I try to debug the uploadingelemt is showen with out any problems. But If I click add files the window just jumps to the top of my page and nothin else happens.
Firebug does not show any problems.
I've tried in FF4 & IE 8 using flash and silverlight
Any one an idea?
Thank you very much and wish you a nice weekend!
Your browser will use Flash runtime as it is listed before the 'html5'. Flash runtime requires setting of 'container: "my_uploader_container_id"'
And your 'pickfiles' button need to be placed into the DIV with ID 'my_uploader_container_id'.
Another solution is using html5 engine - list it before flash in 'runtimes' parameter. But html5 runtime does not work in IE.